Wijzigingen in invoertekst detecteren (textarea)

Ik heb een tekstgebied waarin gebruikers tekst toevoegen. Na het indienen van het tekstgebied krijgt de gebruiker de tekst te zien die hij of zij heeft ingevoerd, maar wordt elk woord in een lijst weergegeven.

<div id=0> "word0" </div>
<div id=1> "word1" </div>

Nu slaat deze pagina ook elk van de woorden in een array op:

WordArr[0] = word0;
WordArr[1] = word1;
...

Now the user can click on each word and the WordArr for the clicked word becomes WordArr[0][0] = "clicked";

Dit is allemaal goed. De gebruiker kan nu de tekst opslaan in een MySQL db met php. De database slaat ook de originele tekst op zonder de div-code.

MAAR De gebruiker kan er ook voor kiezen om de tekst te bewerken. In dit geval laad ik de originele tekst in een tekstgebied, maar deze keer moet ik weten of en welke woorden de gebruiker verwijdert of dat de gebruiker ergens in het tekstgebied woorden toevoegt. In het kort moet ik bijhouden welke div's die zijn gewijzigd. Of als er iets is toegevoegd aan het oorspronkelijke tekstgebied. De gebruiker hoeft de woorden dus niet opnieuw te selecteren.

Laten we zeggen dat de originele tekst is:

Hallo daar mijn jQuery-vriend. Ik ben blij vandaag.

Dan kan de gebruiker misschien iets verwijderen of toevoegen aan dit tekstgebied:

Hallo daar, mijn vriend. Ik ben heel blij vandaag.

Hoe krijg ik dan de wijzigingen in de originele reeks ingevoerd, nog steeds de divs behouden waarop is geklikt?

0
Dit ziet er bijna naar uit dat je een volledige opdracht * nix diff moet uitvoeren, maar dan in javascript. Er zijn enkele snelle en vuile oplossingen, maar ze gaan een voorbehoud maken en vinden mogelijk ALLE wijzigingen niet.
toegevoegd de auteur Russ, de bron
Ik heb deze een keer geprobeerd aehlke.github.com/tag-it maar ik kan niet schrijven alles tussen de elementen (woorden). Dus ik denk dat ik vast zit. Heb ongeveer twee weken aan dit probleem besteed :(
toegevoegd de auteur Mads Christian Sidenius, de bron

1 antwoord

Ik stel voor een object te onderhouden met woorden voor sleutels die geselecteerde woorden bijhoudt. Controleer vervolgens bij het invoeren van een spatie of het voltooien van de bewerking welke woorden aanwezig zijn. Na een klik op een woord call handleWordClick (woord) en ten slotte call getFinal() om een ​​array van objecten zoals deze {word: "apple" te krijgen, klikte: true} .

var words = [],
    clicks = {};

var checkWords = function() {    
     words = $(this).val().split(" ");
     $("#out").val(words.join(","));
};
//call this from whatever event a word click triggers
var handleWordClick = function(word) {
    clicks[word] = true;    
};
//to get all of your data, run this
var getFinal = function() {
    return words.map(function(word) {
        return {
            word: word,
            clicked: clicks[word]
        };
    });
}

$("#in").keydown(function(event) {
    //once they enter space, check what the words are
    if( event.keyCode == 32 ) {
        checkWords.call(this);
    }        
})
//when they're done editing, check what the words are
$("#in").blur(checkWords)
​
0
toegevoegd
Merk op dat dit niet kogelvrij is; bijv. in het geval WordArr een woord twee keer bevat en één woord is verwijderd, zal de functie diff dit niet merken.
toegevoegd de auteur pimvdb, de bron
@MadsChristianSidenius Ik begrijp niet waarom u moet zien wat er is veranderd in plaats van alleen het hele proces van het selecteren van woorden te automatiseren. Plaats meer code en ik weet zeker dat er een betere manier is.
toegevoegd de auteur matt3141, de bron
hier is een werkend voorbeeld jsfiddle.net/wrKdg
toegevoegd de auteur matt3141, de bron
Hier is een puzzel met het live controleren van woorden en een manier om geklikte woorden bij te houden. De uiteindelijke reactie heeft een object van alle woorden met of ze wel of niet zijn aangeklikt. jsfiddle.net/wrKdg/1
toegevoegd de auteur matt3141, de bron
Zou dit werken? Als ik "Ik ben behoorlijk (aangeklikt) blij (geklikt)." En verander het in "Hij was erg blij (klikte). En hij sprong in de lucht". ?
toegevoegd de auteur Mads Christian Sidenius, de bron
Is het mogelijk om jQuery toe te voegen elk woord getypt in een textarea aan een array. Live terwijl ze typen?
toegevoegd de auteur Mads Christian Sidenius, de bron
Zijn er manieren om woorden toe te voegen aan een array LIVE terwijl je ze schrijft? en verwijder ze terwijl je ze verwijdert? Dus als ik binnenkom: hij is een heel gelukkig man, een script zou dit detecteren en LIVE een array maken met: liveArr = ['Hij', 'is', 'a', 'erg', 'blij', 'man'] ??? Kan ik een andere array maken die detecteert welke van de woorden in de array is aangeklikt? clickArr = ['', '', 'geklikt', '', '', ''] En als deze zin dan wordt verwijderd, wordt het clickArr automatisch verwijderd en blijft het leeg? Elke manier om woorden LIVE te detecteren?
toegevoegd de auteur Mads Christian Sidenius, de bron
Heel erg bedankt! Het werkt als een charme!
toegevoegd de auteur Mads Christian Sidenius, de bron