突出显示包括不同的节点答案

【问题标题】：Highlight including different nodes突出显示包括不同的节点
【发布时间】：2014-11-11 18:44:35
【问题描述】：

编辑：我在这篇帖子Remove highlight added to selected text using JavaScript?

中找到了一个很好的解决方案

我正在制作一个脚本来突出显示文本。我正在使用 标签。这部分很简单，但现在我遇到了一个问题。当突出显示包含不同的节点时，我需要在父节点关闭之前关闭  标签，然后在新节点中再次打开 de 。不是很好的解释所以我举个例子：

    <body>

       <p id="0">Lorem ipsum</p>

       <div id="1">dolor sit amet</div>

    </body>

我选择突出显示：

ipsum</p><div id="1">dolor sit

然后我必须以编程方式在 之前关闭 并在<div> 之后打开。有什么想法我该怎么做？我更喜欢使用纯 JavaScript 编写所有脚本，但我们将不胜感激。

这是我要强调的功能：

function surroundSelection(element) {



            if (window.getSelection)
            {
                var sel = window.getSelection();
                if (sel.rangeCount)
                {
                    console.log (sel);

                    var range = sel.getRangeAt(0).cloneRange();



                    range.surroundContents(element);
                    sel.removeAllRanges();
                    sel.addRange(range);



                }
            }
        }

元素将是标签（在我的例子中是）

这就是我所拥有的，仍然存在突出显示不同节点的问题 http://jsfiddle.net/nacles/4L6d57bs/

【问题讨论】：

将显示您想要的任何类型的预览或示例...

标签： javascript html

【解决方案1】：

在您的示例中，您必须在代码的每一部分都开始一个不同的spam：

<span>ipsum</span></p><div id="1"><span>dolor sit</span>

所以对你来说，只需在开头放一个span，然后寻找字符串的结尾，或者如果标签像

一样打开，则查找' 然后注意有一个嵌套的标签块，如果标签是像这样的关闭，那么你只需放置一个关闭跨度。

有很多案例，但我认为不是很困难。

【讨论】：