Javascript 向字符串中的字符添加跨距（在HTML元素中）

我想循环遍历元素中文本的字符，并在字符中添加

span

s。这很容易使用：

$elem=$（'h1'）；
var chars=jQuery.map（$elem.text（）.split（“”），函数（c）{
返回“+c+”；
});
$elem.html（chars.join（“”））；

如上所述，但现在我想更改函数，以便它也能处理更“复杂”的内容，如：

Test

。应将其转换为：

Test

这意味着我不能再简单地遍历元素中的所有字符。是否有一些东西可以用来循环遍历元素的内容（字符）以及所有子元素？或者有没有其他方法可以实现我的目标？

试试（未经测试的）：

函数递归WraptextNodes（$node）{
$node.contents（）.each（函数（））{
var$this=$（this）；
如果（this.nodeType==3）{//Node.TEXT_节点（即…）
变量span=$.each（$this.text（）.split（“”），函数（索引，元素）{
变量$span=$（“”）；
$span.text（元素）；
$span.insertBefore（$this）；
});
$this.remove（）；
}
else if（this.nodeType==1）//Node.ELEMENT\u Node
递归WraptextNodes（$this）；
}

---

示例：

总体思路：

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

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

函数wrapCharacters（元素）{
$（元素）.contents（）.each（函数（））{
if（this.nodeType==1）{
wrapCharacters（此）；
}
else if（this.nodeType==3）{
$（this.replaceWith（$.map）（this.nodeValue.split（“”），函数（c）{
返回“+c+”；
}).加入（“”）；
}
});
}    
wrapCharacters（$（'h1'）[0]）；

---

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

var d\=document.createDocumentFragment（）；
for（var i=0，len=this.nodeValue.length；i

只有在子节点上进行迭代时才需要小心，因为文本节点在迭代过程中会被删除

---

这是一个纯javascript解决方案

/**
*将字符串的每个字符都包含在一个范围内
*@param text将跨越其字符的文本
*@返回{string}已跨越的字符串
*/
函数文本（text）{
返回“”+
text.split（“”）。join（“”+“”）；
}
var text=“每个字符都将在一个范围内”；
document.getElementById（“testContent”）.innerHTML=spanText（text）；
document.getElementById（“showSpans”）.textContent=spanText（text）；

.char{背景色：灰色；}

跨距文本以灰色突出显示
此处跨越了材料
这就是上面突出显示的文本的外观

使用jQuery的筛选器只筛选出textnodes并在地图中运行它们。您忘记了包装每个字符。@FelixKling:谢谢-刚刚更正了这一点并添加了一个示例。创建一个跨度并克隆它通常比使用createElement快得多。使用som一次性替换整个文本节点也可能快得多类似于

element.innerHTML=''+textNode.data.split（''）.join（''）+''；

或类似的东西。这也包装了空格，可能不是OP想要的？是的，克隆可能更快。但是

replaceChild

也会同时替换整个文本节点。到目前为止，将文本节点的内容设置为HTML字符串对我来说很有效（文本节点随后被元素节点替换）但我不知道浏览器之间的这种行为是否一致。

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

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