正则表达式：如何用相同的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/zh-CN/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/