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

Hello my name is Mads.

是可以检测的话“我”，“是”和“的Mads”，并在一个字符串谁是不是已经的一部分包裹的那些话span标签？

所以它成为提前

Hello my name is Mads.

感谢。

来源

2012-07-02 Mads Christian Sidenius

循环遍历子节点，并使用DOM（无jQuery）替换文本节点。 –

右键，

我已经破解它 - 虽然它可能不是你们所看到的最漂亮的代码。

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

a link to jsfiddle example！

来源

2012-07-03 08:49:59

如果您的解决方案对您的问题有帮助，那么对您的问题的答案进行投票是一种好的做法。 – RobB

尝试以下操作：

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()方法确保每个单独的单词都包含为跨度元素，通过所有字母数字字符，下划线和连字符的正则表达式。您可以在常规展示here上查看更多信息。

来源

2012-07-02 19:08:36 RobB

非常接近我想要做的事情:-)但是它返回：**我的电子邮件地址是： ** 您好 my名称 ** 是Mads。 **'。那么它不包裹每个字都不包裹？由于它包裹了整个子字符串“是Mads”？ –

我需要html字符串中的每个单词都没有跨度，它有一个跨度。希望这是有道理的？ –

@MadsChristianSidenius - 更新了对子字符串的解答。 – RobB

如果你得到父元素，你可以使用jQuery对象的text（）函数来获取文本。你可以使用split（“”）来创建一个数组并迭代它以将每个令牌包装在一个标签中。

来源

2012-07-02 19:13:51

是的，这是真的，但我输入一个文本到一个div可编辑区域 - 当我点击一个“编辑”按钮，我需要包围span标签+ class =“class1”围绕那些没有包裹在他们周围的文字。 –

首先，把它变成一个DIV元素，像这样解析HTML字符串到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上找到更可靠的字匹配正则表达式。

来源

2012-07-02 21:35:09

谢谢@Vidas。这帮助了我:-) –

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

回答

相关问题