Question

我想循环遍历元素中文本的字符，并将span添加到字符中。使用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

Answer 2

尝试类似（未经测试）的内容：

function recursivelyWrapTextNodes($node) {
  $node.contents().each(function() {
    var $this = $(this);
    if (this.nodeType === 3) { //Node.TEXT_NODE (IE...)
        var spans = $.each($this.text().split(""), function(index, element) {
            var $span = $("<span></span>");
            $span.text(element);
            $span.insertBefore($this);
        });
        $this.remove();
    }
    else if (this.nodeType === 1) //Node.ELEMENT_NODE
    recursivelyWrapTextNodes($this);
}

示例：http://jsfiddle.net/Ymcha/

Answer 3

这是一个纯粹的JavaScript解决方案

＆＃13;

/**
 * Enclose every character of a string into a span
 * @param text Text whose characters will be spanned
 * @returns {string} The "spanned" string
 */
function spanText(text) {
    return "<span class='char'>" +
        text.split("").join("<\/span><span class='char'>") + "<\/span>";
}

var text = "Every character will be in a span";
document.getElementById("testContent").innerHTML = spanText(text);

document.getElementById("showSpans").textContent = spanText(text);

＆＃13;

.char{background-color: grey;}

＆＃13;

<! --- Demo for spanning all characters -->
<h3> Spanned text is highlighted grey </h3>
<p id="testContent"> Spanned material here</p>

<h3> This is how the above Highlighted text looks </h3>
<p id="showSpans"></p>

＆＃13;

将跨度添加到字符串中的字符（在HTML元素中）

3 个答案: