Javascript - Regex: Comment remplacer id dans la chaîne avec le même ID plus le numéro?

Question

J'ai une chaîne avec plusieurs éléments avec ids comme ci-dessous:

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

Maintenant, j'utilise ce regex pour trouver tous les id dans la chaîne:

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

Ensuite je veux remplacer tous ces id avec un nouvel identifiant. Quelque chose comme ceci:

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

Je veux reg2, comme on le voit ci-dessus, pour renvoyer la valeur des années id. Je ne connais pas trop les expressions régulières, alors comment puis-je faire cela?

Answer 1

Au lieu d'utiliser regex, analyser et parcourir les éléments. Essayez:

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); 

DEMO:http://jsfiddle.net/RbuaG/3/

Ce vérifie si le id est défini en premier lieu, et alors seulement il le modifier.

En outre, il est sûr au cas où le code HTML contient un noeud de commentaire (où IE 6-8 inclut des noeuds de commentaire dans .children).

En outre, il traverse tous les enfants de tous les éléments. Dans votre exemple, vous n'aviez qu'un niveau d'éléments (non imbriqué). Mais dans mon violon, je niche le <input /> et il est encore modifié.

Pour obtenir le code HTML mis à jour, utilisez div.innerHTML.

Avec jQuery, vous pouvez essayer:

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; 
    }); 
}); 

DEMO:http://jsfiddle.net/tXFwh/5/

Bien qu'il soit valable de faire id commencer et/ou un numéro, vous devez modifier le id du éléments pour être un identifiant normal.

Références:

• .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

Essayez d'utiliser

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

Answer 3

En utilisant jQuery (suite à votre 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()); 

Cela est beaucoup mieux que d'utiliser regex sur HTML (Using regular expressions to parse HTML: why not?), est plus rapide (bien que peut être encore améliorée en ayant un sélecteur plus direct que $("[id]") tels que donner les éléments d'une classe).

Fiddle: http://jsfiddle.net/georeith/E6Hn7/10/

Answer 4

Regex est probablement pas la bonne façon de le faire, voici un exemple qui utilise 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(); 

Exemple: http://jsfiddle.net/fYb3U/