Bestimmte Anzahl von Zeichen hervorheben

Ich hatte neulich eine einzigartige Programmierherausforderung, die ich hier teilen wollte. Sie ist ziemlich spezifisch und wird wahrscheinlich keinen großen allgemeinen Nutzen haben, aber hey, sie könnte interessant sein.

Die Idee war, 160 Zeichen "auswählen" zu lassen, wenn man auf einen beliebigen Buchstaben in einem Textblock klickt

Ich dachte nicht, dass es möglich sei, den Text automatisch "wirklich" auszuwählen, da mir das eher wie eine Funktion auf Betriebssystemebene vorkam. Aber ich weiß es wirklich nicht, korrigiert mich, wenn ich falsch liege. Also habe ich stattdessen versucht, es zu "simulieren", indem ich eine Hintergrundfarbe hinter die entsprechenden Zeichen gelegt habe. Im Kontext dessen, was wir taten, funktionierte das sowieso gut. Dann wurden dieselben Zeichen in ein Textfeld verschoben, um sie eventuell zu bearbeiten und einzureichen.

Der schwierigste Teil war für mich, einen Weg zu finden, um genau herauszufinden, auf welches Zeichen in einem Textstring geklickt wurde. Also habe ich wieder geschummelt. Ich dachte, wenn ich jedes einzelne Zeichen in einen <span> einpacke, könnte ich auf Klick-Ereignisse auf jeden dieser Spans achten. Genauso gut. jQuery wie üblich

var theText = $("#theText");

var theString = theText.text();

var numCharacters = theString.length;

var newHTML = "";

for (i = 0; i <= numCharacters; i++) {
    
    var newHTML = newHTML + "" + theString[i] + "";

}

theText.html(newHTML);

Jetzt habe ich (gebunden?) Klick-Ereignisse an jedes dieser neuen, in Spans verpackten Zeichen gebunden. Wenn sie angeklickt werden, wird die "ausgewählte" Klasse von allen entfernt und dem angeklickten hinzugefügt. Dann wird eine for-Schleife 160 Mal ausgeführt. Sie geht zum nächsten Zeichen und hebt es hervor (indem sie eine Klasse hinzufügt)

$("span").click(function(){

    $("span").removeClass("selected");

    $(this).addClass("selected");
    
    var nextSpan = $(this);
    
    for (i = 1; i <= 160; i++) {
    
        nextSpan = nextSpan.next();
    
        nextSpan.addClass("selected");
                    
    }

});

Da ich diesen neu ausgewählten Text auch in ein Textfeld verschieben wollte (zur möglichen weiteren Bearbeitung), führe ich eine zweite Schleife innerhalb der Klickfunktion aus. Diese zweite Schleife durchläuft jedes Zeichen, das gerade ausgewählt ist, und hängt es an eine Zeichenkette an, die in einem jQuery-Daten-Chunk gespeichert ist. Am Ende der Schleife wird dieser Daten-Chunk auf das Textarea angewendet

$("#result").data("result", "");
        
$(".selected").each(function() {

    var oldResults = $("#result").data("result");
            
    var newResults = oldResults + $(this).text();
    
    $("#result").data("result", newResults);

});

$("#result").val($("#result").data("result"));

Da das Ziel darin bestand, die Zeichen letztendlich an eine andere URL zu übermitteln, habe ich einen Button erstellt, der dies tut. Wenn dieser Button geklickt wurde, nahm er den Wert des Textfeldes, fügte ihn an eine URL an und sandte ihn ab

$("#sendit").click(function() {

    var toURL = "?=" + $("#result").val();

    window.location = toURL;
    
    return false;

});

Also wieder, ziemlich spezifisch und ich bin sicher, nicht weit verbreitet nützlich, aber ich hatte noch nie eine andere Funktionalität wie diese gesehen, also vielleicht ist sie für jemanden in einer ähnlichen Situation nützlich.

 

Demo ansehen   Dateien herunterladen

 

UPDATE: Wie ich gehofft hatte, sprang jemand mit einem anderen (schlauen) Ansatz ein: Matt Wondra hat hier eine Demo verfügbar. Er nutzt ein Textarea und JavaScript "ranges". Die einzige Schwäche ist die inhärente Dummheit von Textareas, die nicht in der Höhe mit dem Inhalt wachsen können.