it-swarm.com.de

Umschließen eines ausgewählten Textknotens mit Bereich

Ich möchte einen ausgewählten Text mit span in einen div-Container einschließen. Ist das möglich?

Ein Benutzer wählt einen Text aus und klickt auf eine Schaltfläche. Beim Ereignis "Klicken auf Schaltfläche" möchte ich den ausgewählten Text mit einem Spannelement umschließen. Ich kann den ausgewählten Text mit window.getSelection() abrufen, aber woher weiß ich die genaue Position in der DOM-Struktur?

35
coure2011

Wenn die Auswahl vollständig in einem einzelnen Textknoten enthalten ist, können Sie dies mit der Methode surroundContents() des Bereichs tun, den Sie aus der Auswahl erhalten. Dies ist jedoch sehr spröde: Es funktioniert nicht, wenn die Auswahl nicht logisch in einem einzigen Element eingeschlossen werden kann (im Allgemeinen, wenn der Bereich Knotengrenzen überschreitet, obwohl dies nicht die genaue Definition ist). Im allgemeinen Fall benötigen Sie einen komplizierteren Ansatz.

Außerdem werden DOM Range und window.getSelection() in IE <9 nicht unterstützt. Sie benötigen für diese Browser erneut einen anderen Ansatz. Sie können eine Bibliothek wie z. B. mein eigenes Rangy verwenden, um das Browserverhalten zu normalisieren, und Sie können das Klassenanwendungsmodul für diese Frage als nützlich erachten.

Einfaches surroundContents()-Beispiel jsFiddle: http://jsfiddle.net/VRcvn/

Code:

function surroundSelection(element) {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(element);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}
52
Tim Down

function wrapSelectedText() {       
    var selection= window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span= document.createElement("span");
    span.style.backgroundColor = "yellow";
    span.appendChild(selectedText);
    selection.insertNode(span);
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus  gravida magna, quis interdum magna mattis quis. Fusce tempor sagittis  varius. Nunc at augue at erat suscipit bibendum id nec enim. Sed eu odio  quis turpis hendrerit sagittis id sit amet justo. Cras ac urna purus,  non rutrum nunc. Aenean nec vulputate ante. Morbi scelerisque sagittis  hendrerit. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Nulla tristique ligula fermentum  tortor semper at consectetur erat aliquam. Sed gravida consectetur  sollicitudin. 

<input type="button" onclick="wrapSelectedText();" value="Highlight" />

JS Fiddle .

18
amal

es ist möglich. Sie müssen die Range-API und die Range.surroundContents () -Methode verwenden. Dadurch wird der Knoten eingefügt, in den der Inhalt am Anfang des angegebenen Bereichs eingeschlossen ist. _. Siehe https://developer.mozilla.org/de/DOM/range.surroundContents .

4
JanD

surroundContents funktioniert nur, wenn Ihre Auswahl nur Text und kein HTML enthält. Hier ist eine flexiblere sowie Browserübergreifende Lösung. Dadurch wird ein Bereich wie folgt eingefügt:

<span id="new_selection_span"><!--MARK--></span>

Der Bereich wird vor der Auswahl vor dem nächstgelegenen öffnenden HTML-Tag eingefügt.

var span = document.createElement("span");
span.id = "new_selection_span";
span.innerHTML = '<!--MARK-->';

if (window.getSelection) { //compliant browsers
    //obtain the selection
    sel = window.getSelection();
    if (sel.rangeCount) {
        //clone the Range object
        var range = sel.getRangeAt(0).cloneRange();
        //get the node at the start of the range
        var node = range.startContainer;
        //find the first parent that is a real HTML tag and not a text node
        while (node.nodeType != 1) node = node.parentNode;
        //place the marker before the node
        node.parentNode.insertBefore(span, node);
        //restore the selection
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else { //IE8 and lower
    sel = document.selection.createRange();
    //place the marker before the node
    var node = sel.parentElement();
    node.parentNode.insertBefore(span, node);
    //restore the selection
    sel.select();
}
3
Ali Gangji

Der folgende Code ist hilfreich für das Umschließen des span-Tags für alle Arten von Tags. Bitte gehen Sie den Code durch und verwenden Sie die Logik für Ihre Implementierung.

getSelectedText(this);
addAnnotationElement(this, this.parent);

function getSelectedText(this) {
    this.range = window.getSelection().getRangeAt(0);
    this.parent = this.range.commonAncestorContainer;
    this.frag = this.range.cloneContents();
    this.clRange = this.range.cloneRange();
    this.start = this.range.startContainer;
    this.end = this.range.endContainer;
}


function addAnnotationElement(this, elem) {
    var text, textParent, origText, prevText, nextText, childCount,
        annotationTextRange,
        span = this.htmlDoc.createElement('span');

    if (elem.nodeType === 3) {
        span.setAttribute('class', this.annotationClass);
        span.dataset.name = this.annotationName;
        span.dataset.comment = '';
        span.dataset.page = '1';
        origText = elem.textContent;            
        annotationTextRange = validateTextRange(this, elem);
        if (annotationTextRange == 'textBeforeRangeButIntersect') {
            text = origText.substring(0, this.range.endOffset);
            nextText = origText.substring(this.range.endOffset);
        } else if (annotationTextRange == 'textAfterRangeButIntersect') {
            prevText = origText.substring(0, this.range.startOffset);
            text = origText.substring(this.range.startOffset);
        } else if (annotationTextRange == 'textExactlyInRange') {
            text = origText
        } else if (annotationTextRange == 'textWithinRange') {
            prevText = origText.substring(0, this.range.startOffset);
            text = origText.substring(this.range.startOffset,this.range.endOffset);
            nextText = origText.substring(this.range.endOffset);
        } else if (annotationTextRange == 'textNotInRange') {
            return;
        }
        span.textContent = text;
        textParent = elem.parentElement;
        textParent.replaceChild(span, elem);
        if (prevText) {
            var prevDOM = this.htmlDoc.createTextNode(prevText);
            textParent.insertBefore(prevDOM, span);
        }
        if (nextText) {
            var nextDOM = this.htmlDoc.createTextNode(nextText);
            textParent.insertBefore(nextDOM, span.nextSibling);
        }
        return;
    }
    childCount = elem.childNodes.length;
    for (var i = 0; i < childCount; i++) {
        var elemChildNode = elem.childNodes[i];
        if( Helper.isUndefined(elemChildNode.tagName) ||
            ! ( elemChildNode.tagName.toLowerCase() === 'span' &&
            elemChildNode.classList.contains(this.annotationClass) ) ) {
            addAnnotationElement(this, elem.childNodes[i]);
        }
        childCount = elem.childNodes.length;
    }
}

  function validateTextRange(this, elem) {
    var textRange = document.createRange();

    textRange.selectNodeContents (elem);
    if (this.range.compareBoundaryPoints (Range.START_TO_END, textRange) <= 0) {
        return 'textNotInRange';
    }
    else {
        if (this.range.compareBoundaryPoints (Range.END_TO_START, textRange) >= 0) {
            return 'textNotInRange';
        }
        else {
            var startPoints = this.range.compareBoundaryPoints (Range.START_TO_START, textRange),
                endPoints = this.range.compareBoundaryPoints (Range.END_TO_END, textRange);

            if (startPoints < 0) {
                if (endPoints < 0) {
                    return 'textBeforeRangeButIntersect';
                }
                else {
                    return "textExactlyInRange";
                }
            }
            else {
                if (endPoints > 0) {
                    return 'textAfterRangeButIntersect';
                }
                else {
                    if (startPoints === 0 && endPoints === 0) {
                        return "textExactlyInRange";
                    }
                    else {
                        return 'textWithinRange';
                    }
                }
            }
        }
    }
}
0
sathiya