在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中的所有元素，获取所有文本(在上面的例子中，我需要获取"some text here"，"some more "，" text "，“and more text"，"Some more text "，"link text")，然后在我处理文本(基于文本进行一些更改)后，我需要将它放回原位(带有更改)。

我不知道如何做循环才能从所有元素中获取所有文本。我更喜欢非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/

Answer 2

如果您只想剥离标签，您可以执行以下操作：

var div = document.getElementById('divToProcess');
div.innerHTML = div.innerText;

Answer 3

var text = "";
var nodes = document.getElementById('divToProcess').childNodes;
for(i = 0; i < nodes.length; i++)
{
    text += text.innerHTML()+"<br/>";
}

虽然我还没有检查语法，但是这是你要找的东西吗？