javascript - 为不在标签中的每个单词添加跨度

Question

我需要一个实现以下功能的脚本:在每个单词周围放置一个 span 标签，但已经在标签中的单词除外。

例如下面的 html:

<p>I <span>like</span> to go <b>to</b> the park.</p>

应该变成:

<p><span>I</span> <span>like</span> <span>to</span> <span>go</span> <b>to</b> <span>the</span> <span>park.</span></p>

到目前为止，我只成功地将句子片段放入 span 标记中，而不是每个单词。 (使用此脚本:jsfiddle，jQuery 是允许的)

$("#tot")
    .contents()
    .filter(function () {
    // get only the text nodes
    return this.nodeType === 3 && this.nodeValue.trim() !== "";
}).wrap("<span />");

span {
    background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="tot">
I love to <span id="hello">go to</span> the park every <span>day</span> because <b>it is</b> fun.
</p>

非常感谢任何帮助。

Answer 1

给你:http://jsfiddle.net/oyb4adff/52/

var result = $("#tot")
.contents()
.map(function () {
    // get only the text nodes
    var newText = "";
    if(this.nodeType === 3) {
      var text = this.nodeValue.trim().split(" ");
      for(var i=0; i<text.length; i++) {
        newText += "<span>" + text[i] + "</span>";
        if(i + 1 < text.length) newText += " ";
      }
      return newText;
    }
    return this.outerHTML;
}).toArray()
.join(" ");
$("#tot").html(result);

我所做的是:

1. 遍历内容
2. 如果是常规文本节点，则将其拆分为单独的单词
3. 加上它们周围的跨度
4. 如果它是一个 html 节点，那么只需将其添加回去而不进行编辑