我有以下 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>
提前致谢。
尝试以下操作：
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()获取其中的孩子。然后它应用该filter()方法，该方法针对每个元素测试提供的选择器，并且将选择与选择器匹配的所有元素。一旦只选择了非跨度的文本元素，则使用replaceWith()方法通过所有字母数字字符、下划线和连字符的正则表达式来确保将每个单独的单词包装为跨度元素。您可以在此处查看有关正则表达式的更多信息。
首先，通过将 HTML 字符串放入 DIV 元素中，将其解析为 DOM，如下所示：
<div id="wrap">
<span class="class1">Hello</span> my <span class="class1">name</span> is Mads.
</div>
现在，执行这段代码：
var $wrap = $( '#wrap' );
$wrap.contents().filter(function () {
return this.nodeType === 3 && $.trim( this.data );
}).replaceWith(function () {
return this.data.replace( /(\w+)/g, '<span class="class1">$1</span>' );
});
上面的代码运行后，您可以像这样检索结果字符串：
var result = $wrap.html();
现场演示：http: //jsfiddle.net/Rhpaa/1/
我/(\w+)/用来匹配一个单词。我不确定它有多可靠。如果它不能可靠地工作，请尝试在 SO 上找到更可靠的单词匹配正则表达式。
如果你得到了父元素，你可以使用 jQuery 对象的 text() 函数来获取文本。您可以使用 split(" ") 创建一个数组并对其进行迭代以将每个标记包装在一个标签中。