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 内のすべての要素をループし、すべてのテキストを取得する必要があります (上記の場合、"Some text here"、"some more "、"text"、" and more text"、"some more text "、"link text")、そしてテキストを処理した後 (テキストに基づいていくつかの変更を加えた後)、元の位置に戻す必要があります (変更を加えて)。

すべての要素からすべてのテキストを取得するためにループを実行する方法がわかりません。私は非jQueryソリューションを好みますが、何でもかかります...

4

4 に答える 4

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 に答える
1

タグを削除したいだけの場合は、次のようにします。

var div = document.getElementById('divToProcess');
div.innerHTML = div.innerText;
于 2013-05-06T15:10:33.250 に答える
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 に答える