Text markieren und verändern

[blabla333]

Ich möchte gerne einen Text markieren und diesen mit einem bestimmten Tag umschließen.

Zum markieren bzw. zur Auswertung der Markierung würde ich das hier verwenden:

function wrap(tag) {
    var sel, range;
  
    if (window.getSelection) {
        sel = window.getSelection();
      
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            selectedText = range.toString();
            range.deleteContents();
            range.insertNode(document.createTextNode('<' + tag + '>' + selectedText + '</' + tag + '>'));
        }
    }
    else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        selectedText = document.selection.createRange().text + "";
        range.html = '<' + tag + '>' + selectedText + '</' + tag + '>';
    }

}

$("#editor").on("mouseup",function() {
           wrap('b');
        });

Der Tag wird allerdings nicht wirklich umgesetzt/dargestellt, sondern nur geschrieben.

Hat außerdem jemand einen Tipp, wie ich es einrichte, dass die Tags entfernt werden, wenn die Auswahl bereits den vorgegebenen Tag beinhalten. In dem Beispiel soll die Fett-Formatierung dann entsprechend wieder entfernt werden.

 

[blabla333]

So funktioniert es natürlich:

range.insertNode($('<' + tag + '>' + selectedText + '</' + tag + '>')[0]);

Weiß aber nicht, wie man diesen Tag wieder aus dem selektierten Bereich entfernt.

 

[scbawik]

Du willst also nur noch wissen, wie du die Tags wieder entfernst?

Habe leider schon lange nichts mehr gemacht in die Richtung, deshalb kann ich dir nur ein paar Anhaltspunkte geben.

var tag = 'body';
var r = new RegExp('<\s*/?\s*' + tag + '\s*>'); // Findet alle Zeichenketten die mit <tag> oder </tag> übereinstimmen
var clean = selectedText.replace(r,''); // Ersetze die Übereinstimmenden mit ''
    range.insertNode($(clean)[0]); // 'Aufgeräumten' Text einfügen

Habe das weder getestet noch in der Praxis benutzt. Also viel Glück damit! :)

 

[blabla333]

Danke. Leider gibt die letzte Zeile den Fehler
"Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist. "
Davor das funktioniert und ich kann keinen Unterschied zu meiner Zeile finden, bei der die Tags hinzugefügt werden. Ist ja das gleiche Prinzip, aber warum gibt es jetzt die Fehlermeldung?

Und wie kann ich ermitteln, ob der reguläre Ausdruck ein Ergebnis geliefert hat? Ich würde es dann so machen, dass wenn ein Treffer gefunden wurde, heißt das die Tags müssen entfernt werden. Wenn nichts gefunden wurde, dann werden die Tags gesetzt.

 

[scbawik]

Hallo,

Hab da mal was gemacht, sollte deine Fragen beantworten. Mein Beispiel oben war eben nur ein Beispiel, kein Code den du 1 zu 1 verwenden kannst - falls du das versucht hast.
http://jsfiddle.net/VvrTD/1/