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 some here here”，“some more”，“text”，“and more text”， “更多文本”，“链接文本”），然后在我处理文本（根据文本进行一些更改）后，我需要将其重新放回原位（随着更改）。

我无法弄清楚如何进行循环以获取所有元素的所有文本。我更喜欢非jQuery解决方案，但会采取任何措施......

Answer 1

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

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

Answer 2

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

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替换文本的功能。我不是100％肯定这种方法是否正确/好，如果有人有任何意见，请做评论，所以我们都可以学习。：）

测试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 3

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

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

Answer 4

一种基本的递归方法。

function process(el){
    if(el.nodeType === 3) {    
       // process text node   
        if(el.data){
            el.data = processText(el.data);   
        }
    } else {
        // process children if any
        var children = el.childNodes;

        for(var i = 0; i<children.length; i++){
            process(children[i]);   
        }
    }
}

function processText(text){
    return text.replace("e","*");
}

var top = document.getElementById("top");
process(top);

http://jsfiddle.net/ud78Y/

在HTML中处理纯文本并放回原位

4 个答案: