Question

我有以下HTML字符串：

Hello my name is Mads.

是否可以检测单词'my'，'is'和'Mads'并将这些单词包装在一个不在span标签中的字符串中？

所以它变成

Hello my name is Mads.

提前致谢。

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()来获取子项。然后它应用filter()方法，该方法针对每个元素测试提供的选择器，并且将选择与选择器匹配的所有元素。一旦仅选择了非跨度的文本元素，replaceWith()方法将用于确保每个单词都被包装为span元素，通过所有字母数字字符，下划线和连字符的正则表达式。您可以查看有关常规展示here的其他信息。

Answer 2

如果获得父元素，则可以使用jQuery对象text（）函数来获取文本。您可以使用split（“”）创建一个Array并对其进行迭代以将每个标记包装在标记中。

Answer 3

首先，将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上找到更可靠的单词匹配正则表达式。

Answer 4

右，

我已经破解了它 - 虽然它可能不是你们见过的最漂亮的代码。

html跨度在-blur事件上更新（当您在div可编辑字段外单击时）。

a link to jsfiddle example！

检查字符串，只包装尚未包装的单词？

4 个答案: