在div中使用span（例如）标记换行单词，而div内部有HTML标记

Question

我想在段落内用span标记包装每个单词。当段落中没有HTML标记时，我成功地创建了它。但是当段落内有HTML标记时，它就会变得一团糟。

下面是段落中没有HTML标记时的示例：

null

$('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>

null

但是当段落中有HTML标记时，它就会变得乱七八糟，如下所示：

null

$('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>

null

谢谢DrunkenPoney的努力。他做的最多，但它已经打破了内部跨度的内容。

我希望结果是这样的，浏览器中出现的每个单词都用包装起来，如下所示：

<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替换返回的all替换文本节点。

下面是详细代码：

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);
     }
});

演示。