comment lire la structure HTML à partir des valeurs d'attribut de chaîne et de carte vers des variables locales dans angular2

Question

J'ai une balise HTML réessayée à partir de la base de données qui contient certains attributs. Pour spécifier l'exemple: J'ai cette chaîne HTML comme:

<CoinsNotesSelector items='0.05,0.1,0.2,0.5,1' label='Available coins' mode='Select'></CoinsNotesSelector> 

maintenant je veux valeurs des éléments, des étiquettes et mode en lecture/analyse syntaxique cette balise.

Y a-t-il quelque chose de disponible pour l'analyse des balises HTML personnalisées?

Answer 1

Si vous disposez de votre élément HTML dans votre code et que vous voulez seulement lire les attributs, vous pouvez faire une vanille simple, méthode javascript:

var rawItems = document.getElementsByTagName("CoinsNotesSelector")[0].getAttribute("items"); 
var items = rawItems.split(","); 
console.log("my items",items); 

Vous pouvez changer le attributeName intérieur getAttribute(attributeName) pour avoir votre d'autres attributs tels que l'étiquette et le mode.

Il n'est pas nécessaire de faire des choses Angular2 pour la question que vous posez. Cependant, vous pouvez créer votre propre composant en angle 2 et utiliser @Input() -décorateur pour lire directement les éléments.

EDIT Après avoir compris plus sur la question, il semble que le code HTML est une chaîne brute.

Vous pouvez extraire les éléments en utilisant une expression régulière.

function myFunction() { 
 
     var str = "<CoinsNotesSelector items='0.05,0.1,0.2,0.5,1' label='Available coins' mode='Select'></CoinsNotesSelector>"; 
 
     var myRegExpItems = /items='([\.\,0-9]+)'/g; 
 
     var myRegExpLabel = /label='([\ a-zA-Z0-9]+)'/g; 
 
     var match = myRegExpItems.exec(str); 
 
     document.getElementById("myItems").innerHTML = match[1]; 
 
     console.log("match", match[1].split(",")); 
 
     match= myRegExpLabel.exec(str); 
 
     document.getElementById("myLabel").innerHTML = match[1]; 
 
    }

<button onclick="myFunction()">Run</button> 
 
<div>items: <span id="myItems"></span></div> 
 
<div>label: <span id="myLabel"></span></div>

Ce que nous faisons est de regrouper les résultats dans le items -attribut, à la recherche de tous les nombres, les virgules et les périodes, puis extraire le résultat dans notre match -variable. Cette variable sera un tableau avec toutes nos correspondances. De même avec l'attribut label. Faites correspondre l'espace, tous les chiffres et toutes les lettres. Maintenant, cela fonctionne bien lorsque vous avez seulement des chaînes simples. Si vous avez un fichier plus volumineux contenant de nombreux éléments html formatés en chaînes, je suggère d'utiliser un xml/html-parser ou similaire.