Regex recherche et remplacement de l'expression avec quelque chose de différent pour chaque occurrence de l'expression

Question

J'utilise une API fournisseur fourni qui utilise le javascript pour la sortie HTML qui ressemble essentiellement comme ceci:

<li class="parent_class"> <a href="link1.html"> Parent Name </a> </li> 

<div class="child_class"> 

<li> <a href="link2.html"> Child Name 1 </a> </li> 

<li> <a href="link3.html"> Child Name 2 </a> </li> 

</div> 

<li class="parent_class"> <a href="link4.html"> Parent Name 2</a> </li> 

<div class="child_class"> 

<li> <a href="link5.html"> Child Name 1 </a> </li> 

<li> <a href="link6.html"> Child Name 2 </a> </li> 

</div> 

Et ainsi de suite. Voici le code que je vais pour:

<li class="parent_class"> <a href="link1.html"> Parent Name </a> 

<ul id="xc"> 

<li> <a href="link2.html"> Child Name 1 </a> </li> 

<li> <a href="link3.html"> Child Name 2 </a> </li> 

</ul> </li> 

<li class="parent_class"> <a href="link4.html"> Parent Name 2</a> </li> 

<ul id="1"> 

<li> <a href="link5.html"> Child Name 1 </a> </li> 

<li> <a href="link6.html"> Child Name 2 </a> </li> 

</ul></li> 

(Juste au cas où il est utile. Je vais mettre une étiquette <ul> avant l'appel d'API et une étiquette </ul> après pour fermer la liste complète)

en utilisant plus javascript, j'ai compris comment remplacer le </div> avec le </ul></li> à l'aide de remplacer l'expression régulière, mais je ne suis pas sûr de savoir comment remplacer les balises </li><div> avec les <ul> balises, parce que ceux qui ont besoin d'être différent chaque temps. Le premier <ul> DOIT être <ul id="xc"> (en raison de plus de code que je n'ai pas le contrôle). Les autres <ul> doivent chacun avoir un ID, mais ceux-ci peuvent être générés de manière aléatoire.

J'ai une vague idée que je peux utiliser la méthode exec pour créer un tableau de toutes les instances de </li></div>, array set [0] pour <ul id="xc"> et le réseau puis réglez [1] à <ul id="1">, tableau [2] à <ul id="2"> et ainsi de suite, mais je ne suis pas sûr si c'est une bonne idée (ou comment exactement le faire).

Merci d'avance.

Answer 1

En supposant que vous recevez le code HTML comme une chaîne (par opposition à un document), vous pouvez le convertir en utilisant cette fonction:

function mogrify (input) { 
    // 1) replace </li><div> with <ul> 
    var i = 0; 
    var out = input.replace(/<\/li>\s*<div[^>]*>/g, function() { 
     var listID = i == 0 
        ? "xc" 
        : "xc_" + (Math.floor(Math.random() * 1e9) + 1); 
     ++i; 
     return '<ul class="' + listID + '">'; 
    }); 

    // 2) replace </div> with </ul></li>, like you described: 
    return out.replace(/<\/div>/g, "</ul></li>"); 
} 

Notez que le code HTML d'entrée est syntaxiquement invalide, comme en utilisant des nombres nus comme Attributs d'ID.

Answer 2

Utilisez un parseur DOM parfaitement adapté aux langages de balisage tels que HTML, PAS aux expressions régulières.

Vous pouvez utiliser .getElementsByTagName et .getAttribute pour saisir les divisions dont vous avez besoin et setAttribute, createElement, appendChild à créer.