在HTML元素中选择文本的一部分

Select a portion of text within a HTML element

本文关键字：文本一部分选择 HTML 元素更新时间：2023-09-26

我想创建一个在HTML元素中选择给定文本的函数。

例如，调用selectText('world')将在<span>Hello </span><strong>world</strong>!

这样的标记中选择world

关于类似问题的许多答案建议使用range和selection，但它们都不适合我的情况(有些会选择所有文本，有些不会使用这样的标记，…)。

现在我有(它不起作用):

function selectText ( element, textToSelect ) {
    var text  = element.textContent, 
        start = text.indexOf( textToSelect ),
        end   = start + textToSelect.length - 1,
        selection, range;
    element.focus();
    if( window.getSelection && document.createRange ) {
        range = document.createRange();
        range.setStart( element.firstChild, start );
        range.setEnd( element.lastChild, end );
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange( range );
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText( element );
        range.moveStart( 'character', start );
        range.collapse( true );
        range.moveEnd( 'character', end );
        range.select();
    }
}

这里是一个jsfiddle，这样你就可以看到实际发生了什么:http://jsfiddle.net/H2H2p/

输出错误:

Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 11 is larger than or equal to the node's length (5).

注:

您可以将在元素的textContent中查找文本的方法与此函数结合使用。

演示:http://jsfiddle.net/H2H2p/3/

代码:

function selectText(element, textToSelect) {
    var elementText;
    if (typeof element.textContent == "string" && document.createRange && window.getSelection) {
        elementText = element.textContent;
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElement(element);
        elementText = textRange.text;
    }
    var startIndex = elementText.indexOf(textToSelect);
    setSelectionRange(element, startIndex, startIndex + textToSelect.length);
}
function getTextNodesIn(node) {
    var textNodes = [];
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
        }
    }
    return textNodes;
}
function setSelectionRange(el, start, end) {
    if (document.createRange && window.getSelection) {
        var range = document.createRange();
        range.selectNodeContents(el);
        var textNodes = getTextNodesIn(el);
        var foundStart = false;
        var charCount = 0, endCharCount;
        for (var i = 0, textNode; textNode = textNodes[i++]; ) {
            endCharCount = charCount + textNode.length;
            if (!foundStart && start >= charCount
                    && (start < endCharCount ||
                    (start == endCharCount && i < textNodes.length))) {
                range.setStart(textNode, start - charCount);
                foundStart = true;
            }
            if (foundStart && end <= endCharCount) {
                range.setEnd(textNode, end - charCount);
                break;
            }
            charCount = endCharCount;
        }
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    }
}