jquery - 检查字符串并仅换行尚未换行的单词？

Question

我有以下 HTML 字符串:

<span class="class1">Hello</span> my <span class="class1">name</span> is Mads.

是否可以检测单词“my”、“is”和“Mads”并将这些单词包装在尚未属于 span 标记的字符串中？

所以就变成了

<span class="class1">Hello</span> <span class="class1">my</span> <span class="class1">name</span> <span class="class1">is</span> <span class="class1">Mads.</span>

提前致谢。

Answer 1

尝试以下操作:

HTML:

<div id="parent">
    <span class="class1">Hello</span> my <span class="class1">name</span> is Mads.
</div>

jQuery:

$(document).ready(function(){
    $('#parent').contents().filter(function() {
        return this.nodeName == '#text';
    }).replaceWith(function(){
        return this.nodeValue.replace(/([a-zA-Z0-9_-]+)/g, '<span class="class1">$1</span>');
    });
});

演示:http://jsfiddle.net/CDe5j/

上面的代码采用#parent对象，然后使用contents()让 children 进来。然后它应用 filter()方法，它针对每个元素测试提供的选择器，并且将选择与选择器匹配的所有元素。一旦仅选择了非跨度文本元素，replaceWith()方法用于通过所有字母数字字符、下划线和连字符的正则表达式来确保每个单独的单词都包装为 span 元素。您可以查看有关正则表达式 here 的更多信息.