Как добавить тег `span` к каждому текстовому узлу, который не является единственным потомком своего родительского узла?

Question

Я хотел бы обернуть вокруг каждого TEXT_NODE, чей родитель имеет другие типы дочерних узлов с <span>, так что каждый TEXT_NODE является единственным потомком своего родительского ELEMENT_NODE.

* 1006. * Например,

<div>
    <button />
    <img />
    text node who has other heterogeneous sibling nodes
    <div>
      only-child text node
    </div>
    another text node
</div>

должен стать DOM ниже после манипуляции

<div>
    <button />
    <img />
    <span> text node who has other heterogeneous sibling nodes </span>  <!-- change made -->
    <div>
      only-child text node
    </div>
    <span>another text node</span> <!-- change made -->
</div>

Я понимаю, что мы всегда можем использовать nodeValue.replace() для перезаписи нетекстовых исключающих узлов, но есть ли лучшие способы сделать это?

Answer 1

Вот возможное решение. Пожалуйста, прочитайте комментарии в коде для объяснений.

//Here, I'm looping through all the elements with .search-elements class in case you have multiple.
//If you only have one, you can remove this part and adapt the code below.
$('.search-elements').each(function(_index, _element) {
  var t = $(this); //save the .search-element element for future use.
  var nodes = this.childNodes; //an array of all the child nodes (whitespae, button, images, text, etc)
  var outputNodes = []; //this will store all the elements that needs to be shown 
  //loop through all the childNodes
  for (var i = 0; i < nodes.length; i++) {
    //check if it's type = 3 because 3 is a TEXT_ELEMENT
    if (nodes[i].nodeType === 3) {
    	//now make sure it's not null and check that it's not empty afte removing thewhite spaces
      if ((nodes[i].nodeValue !== null) && (nodes[i].nodeValue.trim() !== '')) {
      	//all good... add it to our outputNodes array
        outputNodes.push('<span class="added-span">' + nodes[i].nodeValue + '</span>');
      }
    } else {
    	//if it's any other type, just add to the outputNodes array because we want to keep it.
      outputNodes.push(nodes[i]);
    }
  }

	
  t.empty();//now that we know what to keep, empty the container
  //loop through all the elements we want to keep and add it to our parent container
  for (var j = 0; j < outputNodes.length; j++) {
    t.append(outputNodes[j]);
  }
});

.added-span {
  border: 1px solid #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-elements">
    <button>My button</button>
    <img src="https://picsum.photos/20/30" alt=""/>
    text node who has other heterogeneous sibling nodes
    <div>
      only-child text node
    </div>
    <span>another text node</span>
</div>

Ссылка на скрипку.