문자열에서 HTML 구조를 읽고 angular2의 로컬 변수에 속성 ​​값을 매핑하는 방법

Question

일부 속성을 보유하고있는 데이터베이스에서 HTML 태그를 재 시도했습니다. 예로 지정하려면

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

지금 내가이 태그를 구문 분석/읽어 항목, 레이블 및 모드의 값을 원하는 : 나는 등이 HTML 문자열을 가지고있다.

사용자 정의 HTML 태그를 구문 분석 할 수있는 것이 있습니다.

Answer 1

당신은 당신의 코드에 HTML 요소를 가지고 속성 만 읽고 싶다면, 당신은 자바 스크립트 방법 간단한 바닐라 수행 할 수 있습니다

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

당신이 얻을하기 위해 getAttribute(attributeName) 내부의 attributeName을 변경할 수 있습니다 당신의 라벨 및 모드와 같은 다른 속성도 있습니다.

질문하는 질문에 Angular2 항목을 적용 할 필요가 없습니다. 그러나 각도 2에 자신 만의 구성 요소를 만들고 항목을 직접 읽으려면 @Input() -decorator를 사용할 수 있습니다.

편집 질문에 대한 자세한 내용을 이해 후에는 HTML 원시 문자열 것 같다.

정규 표현식을 사용하여 항목을 추출 할 수 있습니다.

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>

우리가의 items -attribute 내 결과를 그룹화 모든 숫자, 쉼표, 마침표를 찾고, 다음 우리 match - 변수에 결과를 추출하면된다. 이 변수는 우리가 모두 일치하는 배열입니다. 마찬가지로 label - 특성과 유사합니다. 공백, 모든 숫자 및 모든 문자와 일치합니다. 자, 이것은 단순한 문자열 만 가지고있을 때 잘 작동합니다. 문자열로 포맷 된 많은 html 요소를 포함하는 큰 파일이 있다면 xml/html-parser 또는 유사 항목을 사용하는 것이 좋습니다.