0 
var text='<div id="main"><div class="replace">&lt; **My Text** &gt;</div><div>Test</div></div>'

div を class="replace" に置き換えたいのですが、html エンティティ&lt; &gt; がその div 内に他のテキストで入ります。

すなわち出力：

'<div id="main"> Hello **My Text** Hello <div>Test</div> </div>'

私はもう試した

var div = new RegExp('<[//]{0,1}(div|DIV)[^><]*>', 'g');
text = text.replace(div, "Hello");

しかし、これはすべてのdivを置き換えます。

どんな助けもありがたく受け取った！

4

4 に答える 4

2

純粋な JS では、次のようになります。

var elements = document.getElementsByClassName('replace');
var replaceTag = document.createElement('replacetext');
for (var i = elements.length - 1; i >= 0; i--) {
    var e = elements[i];
    e.parentNode.replaceChild(replaceTag, e);
};​
于 2012-10-31T08:03:23.973 に答える
2

Jquery ソリューションが受け入れられる場合:

text = $(text) // Convert HTML string to Jquery object
         .wrap("<div />") // Wrap in a container element to make...
         .parent()        // the whole element searchable
         .find("div.replace") // Find <div class="replace" />
           .each(function()   // Iterate over each div.replace
           {
             $(this)
               .replaceWith($(this).html() // Replace div with content
                .replace("&lt;", "<sometext>")
                .replace("&gt;", "</sometext>")); // Replace text
           })
         .end().html(); // return html of $(text)

これは次のように設定textされます。

<div id="main"><sometext> My Text </sometext><div>Test</div></div>

そして、それを再び元に戻すには：

text = text.replace('<sometext>', '<div class="replace">&lt;')
           .replace('</sometext>', '&gt;</div>');

http://api.jquery.com/jquery/#jQuery2
http://api.jquery.com/each/
http://api.jquery.com/find/
http://api.jquery.com/html/

于 2012-10-31T07:54:41.773 に答える
1

これは、あなたが望むものと一致する1つのクレイジーな正規表現です:

var text='<div id="main"><div class="replace">&lt; **My Text** &gt;</div><div>Test</div></div>'

var r = /(<(div|DIV)\s+class\s*?=('|")\s*?replace('|")\s*?>)(\s*?&lt;)(.*?)(&gt;\s*?)(<\/(div|DIV)\s*?>)/g;

全体の置換は、次の方法で行うことができます。

text.replace(r, function () {
         return 'Hello' + arguments[6] + 'Hello';
    });

解決策に問題がある場合はお知らせください:)。

ところで：私は答えのような正規表現に完全に反対しています...その複雑な正規表現でそれを作った場合、おそらく問題を処理するより良い方法があります...

于 2012-10-31T09:19:43.227 に答える
0

代わりに DOM の使用を検討してください。必要な構造が既にあるので、ノード自体を交換します ( @maxwell のコードから大量に借用しますが、子も移動します):

var elements = document.getElementsByClassName('replace');
for(var i = elements.length-1; i>= 0; --i) {
    var element = elements[i];
    var newElement = document.createElement('replacetext');
    var children = element.childNodes;
    for(var ch = 0; ch < children.length; ++i) {
        var child = children[ch];
        element.removeChild(child);
        newElement.appendChild(child);
    }
    element.parentNode.insertBefore(newElement,element);
    element.parentNode.removeChild(element);
}

次に、指定されたクラスの各要素に対して、その要素の位置を使用して新しい要素を挿入し、最後にそれ自体を削除する前に、その子のそれぞれを新しい要素に移動します。

私の唯一の疑問は、getElementByClassName によって返される配列内の項目の変更が問題を引き起こすかどうかです。要素を処理する前に、要素が有効かどうかを確認するために追加のチェックが必要になる場合があります。または、これを再帰関数として記述し、最も深いノードからツリーを最初に処理することを好む場合もあります。

より多くの作業のように見えるかもしれませんが、これはより速く (変更後に html を再解析する必要はありません。要素の移動は参照値の割り当てにすぎません)、はるかに堅牢です。HTML を解析しようとすると、健康を害する可能性があります。

質問を読み直して (常に良い計画です)、文字列内のテキストから始めます。それが本当に開始点である場合 (つまり、innerHTML 値からそれを引き出しているだけではない場合)、上記を使用するには、一時的な親要素を作成するだけです。

var fosterer = document.createElement('div');
fosterer.innerHTML = text; // your variable from the question

そして、 を使用して続行しfosterer.getElementsByClassNameます。

于 2012-10-31T08:19:13.283 に答える