javascript - 仅处理 HTML 中的文本并放回原位

Question

我需要找到 div 中的所有文本，进行一些文本处理，然后将处理后的文本放回原处。

示例 html(但可以是任何内容):

<div id="divToProcess">
    <div>Some text here</div>
    <div id="id1">some more <span class="class2">text</span> and more text</div>
    <div class="class1">some more text <a href="xxxxxx">link text</a><div>
</div>

所以在上面我需要循环divToProcess内的所有元素，获取所有文本(在上面的情况下我需要获取“这里有一些文本”，“更多一些”，“文本”，“和更多文本”， “更多文本”、“链接文本”)，然后在处理文本后(根据文本进行一些更改)，我需要将其放回原位(进行更改)。

我不知道如何进行循环以便从所有元素中获取所有文本。我更喜欢非 jQuery 解决方案，但会采取任何措施...

Answer 1

这是一种灵活的方法，使用回调:

function replaceTextNodes(node, callback) {
    if (node.nodeType === 1) {
        for (var i = 0; i < node.childNodes.length; i++) {
            replaceTextNodes(node.childNodes[i], callback);
        }
    } else if (node.nodeType === 3) {
        node.textContent = callback(node.textContent);
    }
}

replaceTextNodes(document.getElementById("divToProcess"), function (text) {
    return text + text;
});

http://jsfiddle.net/QAyAM/

这将使所有事件处理程序等保持不变，正如您可能想要的那样。

编辑:允许用 HTML 替换文本的功能。我不确定这种方法是否正确/好，如果有人有任何意见，请发表评论，以便我们大家都可以学习。 :)

测试 HTML:

<div id="divToProcess">
    <div>Some text here</div>
    <div id="id1">so hello me more <span class="class2">text</span> and more text</div>
    <div class="class1">some more text <a href="xxxxxx">link text</a>
        hello!! hello
    <div>
</div>

JS:

function replaceTextNodesWithHTML(node, callback) {
    if (node.nodeType === 1) {
        for (var i = 0; i < node.childNodes.length; i++) {
            replaceTextNodesWithHTML(node.childNodes[i], callback);
        }
    } else if (node.nodeType === 3) {
        var parentNode = node.parentNode;
        var div = document.createElement("div");
        div.innerHTML = callback(node.textContent);
        var childNodes = [].slice.call(div.childNodes);
        if (childNodes.length > 0) {
            parentNode.replaceChild(childNodes[childNodes.length - 1], node);
            for (var i = childNodes.length - 2; i >= 0; i--) {
                parentNode.insertBefore(childNodes[i], childNodes[i + 1]);
            }
        }
    }
}

replaceTextNodesWithHTML(document.getElementById("divToProcess"), function (text) {
    return text.replace(/hello/g, "<a href='#'>Hello!</a>");
});

http://jsfiddle.net/tXS2v/1/