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);

我做的是：

循环浏览内容
如果是常规文本节点，则将其拆分为单独的单词
加上围绕它们的跨度
如果它是一个html节点，那么只需将其添加回来而不进行编辑

为不在标记

1 个答案: