Question

我正在研究JavaScript中的文本选择和范围。

我需要准确地获取所选文本周围的任何节点，例如：

<div>this is <span>some simple</span> text</div>

当用户选择单词'some simple'时，我需要知道它完全位于节点内。然而，如果他们只选择“某些”，那么这不完全在节点内，因为未选择“简单”这个词。

最终要求是只有在选择节点内的整个文本时才能修改节点上的类。

jquery也是可行的。感谢

要为此添加更多上下文，当用户选择某些文本时，我们会添加一些文本，让我们说“粗体”。用户可以根据需要随时编辑父div中的文本，这样每次编辑都可以添加一个包含所选文本的新跨度。我们最终会得到类似的东西：

<div><span class="text-bold">Hi</span>, <span class="text-red">this <span class="text-italic">is</span></span> a sample text item</div>

因此，跨度可以根据用户的需求而变化。

Answer 1

您希望每次都获得DOM。因此，您可以将ID设置为HTML Element Objects并从中获取值。例如：

 <span id="f_span">some simple</span>

<script>
     var x = document.getElementById("f_span");
</script>

然后，您可以检查x值是否等于用户选择的值。

Answer 2

您可以使用setInterval每隔x秒获取所选文字。使用联接功能，您可以获得所选文本。

选择用户：

function getSelected() {
    if(window.getSelection) { return window.getSelection(); }
    else if(document.getSelection) { return document.getSelection(); }
    else {
        var selection = document.selection && document.selection.createRange();
        if(selection.text) { return selection.text; }
        return false;
    }
    return false;
}

它返回一个对象，为您提供选择的偏移量。如果result.anchorOffset = 0和result.focusOffset = result.anchorNode.length（如果它从节点的开头开始并且它具有整个节点的长度），则用户选择了所有节点。

Answer 3

感谢您的回复，它让我能够拼凑出我的解决方案：

 function applyTextFormatClass(className) {
        var selection = getSelected();
        var parent = selection.getRangeAt(0).commonAncestorContainer; //see comment and link below
        if (parent.nodeType !== 1) {
            parent = parent.parentNode; //we want the parent node
        }
        var tagText = parent.innerText;
        var selectText = selection.toString();

        if (tagText.length !== selectText.length) {
            addNodeAroundSelectedText(selection, className); //create new node
        } else {
            addClass(parent, className); //add class to existing node
        }
    }

commonAncestorContainer：https://developer.mozilla.org/en-US/docs/Web/API/Range/commonAncestorContainer

JavaScript完全在节点内选择文本

3 个答案: