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），它也是安全的。

此外，它遍历所有元素的所有子元素。在您的示例中，您只有一层元素（没有嵌套）。但是在我的小提琴中，我嵌套了<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 上使用正则表达式（使用正则表达式解析 HTML：为什么不呢？）要好得多，而且速度更快（尽管可以通过使用比$("[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 回答