文字列からHTML構造体を読み込んで、angle2のローカル変数に属性値をマップする方法

Question

いくつかの属性を保持するデータベースからHTMLタグを再試行しました。 は一例で指定するには：

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

が、今私は、このタグを解析する/読み込むことによりアイテム、ラベルやモードの値をしたい： 私は、このHTML文字列を持っています。

カスタムHTMLタグの解析に役立つものがあります。あなたのを得るためにgetAttribute(attributeName)内部attributeNameを変更することができます

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

：あなたのコードであなたのhtml要素を持っている属性のみを読みたい場合は

Answer 1

することは、あなたはjavascriptのメソッド簡単なバニラを行うことができますその他の属性（ラベルやモードなど）

あなたが求めている質問にAngular2のことをする必要はありません。 しかし、角度2に独自のコンポーネントを作成し、アイテムを直接読み取るために@Input()デコレータを使用することができます。

EDIT 質問についての詳細を理解した後、HTMLは生の文字列であるようです。

正規表現を使用してアイテムを抽出することができます。私たちは、items -attribute内の結果をグループ化し、すべての数字、カンマ、ピリオドを探して、その後、私たちのmatch -variableに結果を抽出している何

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>

。この変数は、すべての一致を含む配列になります。同様にlabel属性と同じです。スペース、すべての数字とすべての文字のためのマッチ。さて、これはあなたが単純な文字列しか持たないときにうまく機能します。文字列としてフォーマットされたhtml要素が多数含まれているファイルが大きい場合は、xml/html-parserなどを使用することをお勧めします。