将跨度添加到字符串中的字符（在HTML元素中） [英] Add spans to characters in a string (in an HTML element)

问题描述

我想循环遍历元素中文本的字符，并将 span 添加到字符中。使用 jQuery.map（） <非常简单/ a>：

  $ elem = $（'h1'）; 
 var chars = jQuery.map（$ elem.text（）。split（''），function（c）{
 return'< span>'+ c +'< / span>' ; 
}）; 
 $ elem.html（chars.join（''））; 
  

以上使用简单的字符串工作得很好，但现在我想更改函数，以便它还能处理更多复杂内容，例如：< 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> 。

这意味着我不能简单地遍历元素中的所有字符。有什么东西我可以用来循环元素的内容（字符）以及所有孩子吗？还是有另一种方法可以实现我想要的东西吗？

解决方案

总体思路：

您可以递归迭代子节点。如果遇到元素节点，则迭代其子节点等。如果遇到文本节点，则用一系列 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）{
返回'< 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）; 
} 
 //文档片段很棒:) 
 this.parentNode.replaceChild（d_，this）; 
  

由于文本节点在迭代期间被删除，因此只需仔细迭代子节点。 / p>

简单JavaScript示例

I want to loop through the characters of a text in an element and add spans to the characters. This is pretty easy using jQuery.map():

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

The above works great with a simple string, but now I want to change the function so that it also will handle more 'complex' contents like: <h1>T<em>e</em><b>st</b></h1>. Which should be translated to: <h1><span>T</span><em><span>e</span></em><b><span>s</span><span>t</span></b></h1>.

This means I cannot simply loop through all the characters in the element anymore. Is there something I can use to loop through the contents (characters) of an element as well as all children? Or is there another way of achieveing what I want?

解决方案

Overall idea:

You can recursively iterate over the child nodes. If you encounter an element node, you iterate over its children etc. If you encounter a text node, you are replacing it with a series of span elements.

---

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 (without jQuery)

The idea stays the same, and even without jQuery, wrapping each character is not very difficult:

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

Only iterating over the child nodes has to be done carefully because text nodes are getting removed during iteration.

Plain JavaScript example

这篇关于将跨度添加到字符串中的字符（在HTML元素中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！