2

我需要在 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 中的所有元素，获取所有文本（在上面的情况下，我需要获取“这里有一些文本”、“更多一些”、“文本”、“还有更多文本”、“更多一些text", "link text")，然后在我处理文本后（根据文本进行一些更改），我需要将其放回原处（进行更改）。

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

4

4 回答 4

1

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

var div = document.getElementById('divToProcess');
div.innerHTML = div.innerText;
于 2013-05-06T15:10:33.250 回答
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 替换文本的功能。我不是 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/

于 2013-05-06T15:13:41.140 回答
0 
var text = "";
var nodes = document.getElementById('divToProcess').childNodes;
for(i = 0; i < nodes.length; i++)
{
    text += text.innerHTML()+"<br/>";
}

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

于 2013-05-06T15:11:12.663 回答
0

一种基本的递归方法。

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/

于 2013-05-06T15:17:37.907 回答