3

以下のようなIDを持つ複数の要素を持つ文字列があります：

var data = "<div id='1'></div><input type='text' id='2'/>";

今、この正規表現を使用して、文字列内のすべての ID を検索しています。

var reg = /id="([^"]+)"/g;

その後、これらすべての ID を新しい ID に置き換えたいと思います。このようなもの：

data = data.replace(reg, + 'id="' + reg2 + '_' + numCompare + '"');

reg2上記のように、id の値を返すようにします 。私は正規表現にあまり慣れていないので、どうすればこれを行うことができますか?

4

4 に答える 4

5

正規表現を使用する代わりに、それを解析して要素をループします。試す：

var data = "<div id='1'></div><div id='asdf'><input type='text' id='2'/></div>",
    numCompare = 23,
    div = document.createElement("div"),
    i, cur;

div.innerHTML = data;

function updateId(parent) {
    var children = parent.children;
    for (i = 0; i < children.length; i++) {
        cur = children[i];
        if (cur.nodeType === 1 && cur.id) {
            cur.id = cur.id + "_" + numCompare;
        }
        updateId(cur);
    }
}

updateId(div);

デモ: http://jsfiddle.net/RbuaG/3/

これは、最初に が設定されているかどうかを確認し、idそれから変更します。

また、HTML にコメント ノードが含まれている場合でも安全です (IE 6-8 では にコメント ノードが含まれています.children)。

また、すべての要素のすべての子をウォークスルーします。あなたの例では、要素のレベルは 1 つしかありませんでした (ネストされていません)。しかし、私のフィドルでは、をネストし<input />ていますが、まだ変更されています。

更新された HTML を取得するには、 を使用しますdiv.innerHTML。

jQuery を使用すると、次のことを試すことができます。

var data = "<div id='1'></div><div id='asdf'><input type='text' id='2'/></div>",
    numCompare = 23,
    div = $("<div>"),
    i, cur;

div.append(data);

div.find("[id]").each(function () {
    $(this).attr("id", function (index, attr) {
        return attr + "_" + numCompare;
    });
});

デモ: http://jsfiddle.net/tXFwh/5/

idで始まる、および/または数字であることは有効ですがid、要素の を通常の識別子に変更する必要があります。

参考文献:

于 2013-05-09T15:47:13.680 に答える
2

使ってみて

.replace(/id='(.*?)'/g, 'id="$1_' + numCompare + '"');
于 2013-05-09T15:47:22.773 に答える
1

jQuery の使用 (さらにコメントへ)。

var data = "<div id='1'></div><input type='text' id='2'/>";
var output = $("<div></div>").html(data); // Convert string to jQuery object
output.find("[id]").each(function() { // Select all elements with an ID
   var target = $(this);
   var id = target.attr("id"); // Get the ID
   target.attr("id", id + "_" + numCompare); // Set the id
});
console.log(output.html());

これは、HTML で正規表現を使用するよりもはるかに優れており ( Using regular expressions to parse HTML: why not?$("[id]") )、より高速です (ただし、要素にクラスを与えるよりも、より直接的なセレクターを使用することでさらに改善できます)。

フィドル: http://jsfiddle.net/georeith/E6Hn7/10/

于 2013-05-09T15:50:19.913 に答える
1

正規表現はおそらくこれを行う正しい方法ではありません。jQuery を使用する例を次に示します。

var htmlstring = "<div id='1'></div><input type='text' id='2'/>";

var $dom = $('<div>').html(htmlstring);

$('[id]', $dom).each(function() {
    $(this).attr('id', $(this).attr('id') + '_' + numCompare);
});

htmlstring = $dom.html();

例: http://jsfiddle.net/fYb3U/

于 2013-05-09T15:56:25.240 に答える