javascript - 在 Javascript 文本之间插入文本

Question

使用the following demo ，我试图使用 <span> 突出显示一些单词一些文本之间的标记。

这对于一个人来说是正确的，但是如果我尝试向该段落添加更多突出显示，它要么突出显示整个内容，要么在添加新突出显示之前清除上一个突出显示。

如何在一个段落中插入多个突出显示？

编辑更新了链接以尝试显示我如何添加第二个突出显示...它的工作方式似乎与我的完全相同

Answer 1

在考虑了您想要什么之后，我可以看到它满足您的要求的唯一方法是您使用 Range 。最难的一点是将索引转换为您想要的文本的真实位置，这花了我一段时间，但我相信这会起作用

// helper function to walk DOM-tree and find end-points
// basically, converts the index of a character in terms of a HTML element
// into it's offset in a #text Node
function getTextOffset(parent, index) {
    if (parent.nodeType === 3)
        return {'node': parent, 'offset': index};
    var e = parent.childNodes[0], i = index, prev = null;
    while (1) {
        while (e.nodeType !== 3 || e === prev)
            if (e.childNodes && e.childNodes.length)
                e = e.childNodes[0];
            else if (e.nextSibling)
                e = e.nextSibling;
            else {
                while (!e.nextSibling)
                    if (!e.parentNode || e.parentNode === parent)
                        throw RangeError('Index out of range');
                    else
                        e = e.parentNode;
                e = e.nextSibling;
            }
        if (e.data.length < i)
            i -= e.data.length, prev = e;
        else
            return {'node': e, 'offset': i};
    }
}

现在您需要做的就是编写一个函数来创建范围并格式化它..

function highlight(node, start, end) {
    var r, o, hi;
    // find text
    r = document.createRange();
    o = getTextOffset(node, start); // find start point
    r.setStart(o.node, o.offset);   // set start in range
    o = getTextOffset(node, end);   // find end point
    r.setEnd(o.node, o.offset);     // set end in range
    // now format
    hi = document.createElement('span');
    hi.style.background = 'yellow';
    hi.appendChild(r.extractContents());
    r.insertNode(hi);
    // cleanup
    r.detach();
}

highlight(containerEl, 3, 5); // invoke

DEMO