javascript - 将跨度添加到字符串(HTML 元素中)中的字符

Question

我想循环遍历元素中文本的字符并添加 span s 到 Angular 色。使用 jQuery.map() 这非常容易:

$elem = $('h1');
var chars = jQuery.map($elem.text().split(''), function(c) {
  return '<span>' + c + '</span>';
});
$elem.html(chars.join('')); 

以上works great with a simple string ，但现在我想更改该函数，以便它也可以处理更“复杂”的内容，例如: <h1>T<em>e</em><b>st</b></h1> 。应翻译为:<h1><span>T</span><em><span>e</span></em><b><span>s</span><span>t</span></b></h1> .

这意味着我不能再简单地循环遍历元素中的所有字符。我可以使用某些东西来循环元素以及所有子元素的内容(字符)吗？或者还有其他方法可以实现我想要的吗？

Answer 1

总体思路:

您可以递归地迭代子节点。如果遇到元素节点，则迭代其子节点等。如果遇到文本节点，则将其替换为一系列 span 元素。

<小时/>

jQuery

function wrapCharacters(element) {
    $(element).contents().each(function() {
        if(this.nodeType === 1) {
            wrapCharacters(this);
        }
        else if(this.nodeType === 3) {
            $(this).replaceWith($.map(this.nodeValue.split(''), function(c) {
               return '<span>' + c + '</span>';
            }).join(''));
        }
    });
}    

wrapCharacters($('h1')[0]);

DEMO

<小时/>

JavaScript(不含 jQuery)

这个想法保持不变，即使没有 jQuery，包装每个字符也不是很困难:

var d_ = document.createDocumentFragment();

for(var i = 0, len = this.nodeValue.length; i < len; i++) {
    var span = document.createElement('span');
    span.innerHTML = this.nodeValue.charAt(i);
    d_.appendChild(span);
}
// document fragments are awesome :)
this.parentNode.replaceChild(d_, this);

仅对子节点进行迭代时必须小心，因为文本节点在迭代过程中会被删除。

Plain JavaScript example