Javascript - Regex:如何用相同的id加数字替换字符串中的id

Javascript - Regex : How to replace id in string with the same id plus number?

本文关键字：id 数字 替换 字符串 Regex 何用相 Javascript      更新时间：2023-09-26

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

不使用regex，而是解析它并遍历元素。试一试:

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 />，它仍然被修改。

使用div.innerHTML获取更新后的HTML。

使用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/

尝试使用

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

Regex可能不是正确的方法，这里有一个使用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/

使用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上使用regex要好得多(使用正则表达式解析HTML:为什么不呢?)，更快(尽管可以通过比$("[id]")更直接的选择器进一步改进，例如给元素一个类)。

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

相关文章：