Javascript - 正则表达式：如何用相同的id加号替换字符串中的id？

Question

我有一个包含多个元素的字符串，其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的值。 我不太熟悉正则表达式，所以我该怎么做呢？

Answer 1

而不是使用正则表达式，解析它并循环遍历元素。 尝试：

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注释节点），则它是安全的。

此外，它遍历所有元素的所有孩子。 在您的示例中，您只有一个级别的元素（没有嵌套）。 但是在我的小提琴中，我嵌套<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更改为普通标识符。

参考文献：

• .children ： https ： //developer.mozilla.org/en-US/docs/DOM/Element.children
• .nodeType ： https ： //developer.mozilla.org/en-US/docs/DOM/Node.nodeType
• jQuery.find() ： http ： //api.jquery.com/find/
• jQuery.attr() ： http ： //api.jquery.com/attr/
• jQuery.each() ： http ： //api.jquery.com/each/

Answer 2

尝试使用

.replace(/id='(.*?)'/g, 'id="$1_' + numCompare + '"');

Answer 3

使用jQuery（进一步到您的commments）。

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上使用正则表达式要好得多（ 使用正则表达式解析HTML：为什么不呢？ ），速度更快（虽然可以通过使用比$("[id]")更直接的选择器来进一步改进，例如给出元素一类）。

小提琴： http ： //jsfiddle.net/georeith/E6Hn7/10/

Answer 4

正则表达式可能不是正确的方法，这是一个使用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/