Question

我想在段落中用span标签包装每个单词。我在段落中没有HTML标签时成功完成了它。但是当段落里面有HTML标签时，它就会变得混乱。

此处示例当段落中没有HTML标记时：

$('div').html(function(i, v) { 
    return $.trim(v).replace(/(\w+)/g, '<i class="woord">$1</i>'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    11111 22222 33333 44444
</div>

但是当段落中有HTML标签时，它会变得如下：

$('div').html(function(i, v) { 
    return $.trim(v).replace(/(\w+)/g, '<i class="woord">$1</i>'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    11111 <span>22222 <small>33333</small></span> 44444
</div>

感谢 DrunkenPoney 尝试实施该功能。他做得最多，但它打破了内部跨度的内容。

我希望结果如下所示，浏览器中显示的每个单词都包含<i class="woord">，如下所示：

<div>
    <i>June</i> <span><i>10</i> <i>sssssss</i></span> <i>ggdgfdf</i>
</div>

他的代码结果打破了原始的span代码结构，如下所示：

<div>
  <i class="woord">11111</i> <i class="woord"><span>22222</span></i> <i class="woord"><small>33333</small></i> <i class="woord">44444</i>
</div>

Answer 1

确实需要遍历所有文本节点。在每个文本节点中，您只需用所需的字符串替换所有单词。所以这个想法很清楚。请注意，不建议使用Regex对HTML标记进行搜索/替换。这就是我们需要处理原始文本节点的原因。

另外，为了方便地使用jQuery，我们使用replaceWith方法就地替换文本节点，并使用Regex替换返回的所有文本节点。

以下是详细代码：

var wrapHtml = function(textNode){
                 return $(textNode).replaceWith(
                                    textNode.nodeValue
                                            .replace(/\w+/g,"<i class='woord'>$&</i>"));
               };

$("div").contents().each(function(i,e){
 if(e.nodeType == 1){     
       var elems = [];
       elems.push(e);
       while(elems.length > 0){
         var ce = elems.pop();
         if(ce.nodeType == 1) {
          $(ce).contents().each(function(j,o){
              if(o.nodeType == 1) {
                   elems.push(o);
                  } else {
                   wrapHtml(o);
                  }
              });
         } else {
              wrapHtml(ce);
         }
       }     
     } else {
       wrapHtml(e);
     }
});

Demo

用div（例如）标签包装div中的单词，而div里面有HTML标签

1 个答案: