Question

我遇到了一个问题，我过去2天一直试图解决这个问题，但无法解决。

问题：

我有一个HTML

      <div class="string-box">
         Text 1 wrap me
         <span class="inner-span">Don't search me</span>
         <span class="inner-span">Identical text</span>
         Identical text
         substring match
         <span class="inner-span">Don't search substring match</span>
         <br>
         Finally wrap me
      </div>

我想将内容包装在下面

      <div class="string-box">
         <span> Text 1 wrap me </span>
         <span class="inner-span">Don't search me</span>
         <span class="inner-span">Identical text</span>
         <span>Identical text</span>
         <span>substring match</span>
         <span class="inner-span">Don't search substring match</span>
         <br>
         <span>Finally wrap me</span>
      </div>

我尝试了什么

a）我首先尝试在html中搜索字符串并使用字符串替换来用包装字符串替换字符串。这种方法的问题在于它也取代了孩子们的东西......

b）我尝试克隆节点并删除所有子节点，但后来我丢失了字符串的位置。

c）我尝试使用以下代码替换textNode，但最终得到了HTML

   $('.string-box').contents().filter(function(){ 
        return this.nodeType == 3; 
   }).each(function(){ 
        this.nodeValue = '<span>'+this.nodeValue+'</span>';                   
   })

先谢谢你的时间和时间。帮助..

Answer 1

您的代码已关闭，但nodeValue无法包含HTML - 因此，为什么会在您的尝试中对其进行编码。相反，您可以wrap() HTML中的textNode，如下所示：

$('.string-box').contents().filter(function() {
    return this.nodeType == 3;
}).each(function() {
    $(this).wrap('<span />');
})

Working example

更新

这是针对nodeValue包含换行符并且您希望将节点的每一行包装在其自己的span中的情况的修复：

$('.string-box').contents().filter(function() {
    return this.nodeType == 3 && this.nodeValue.trim();
}).each(function() {
    var $spans = this.nodeValue.trim().split(/\r?\n/).map(function(i, v) {
        return $('<span />', { text: i + ' ' });
    });
    $(this).replaceWith($spans);
})

Working example

Answer 2

只在each中进行，你就没事了。首先不需要filter元素。您可以使用jQuery wrap span中的$('.string-box').contents().each(function() { if( this.nodeType == 3 ) $(this).wrap('<span />'); });内容。{/ 1>

{{1}}

Working example.

Answer 3

由于您已经有了jQuery的答案，请允许我提供一个简单的JavaScript替代方案：

var stringBoxes = document.querySelectorAll('.string-box'),
    stringBoxArray = Array.from(stringBoxes),
    newElement = document.createElement('span'),
    clone,
    children;

stringBoxArray.forEach(function(box){
  children = Array.from( box.childNodes ).filter(function(child){
    return child.nodeType === 3;
  }).forEach(function (text) {
    clone = newElement.cloneNode();
    text.parentNode.insertBefore(clone, text);
    clone.appendChild(text);
  });
});

用div排除文本，排除所有孩子

3 个答案: