[js 고수 의 길]HTML 라벨 은 DOM 노드 의 실현 방법 으로 해석 된다.

최근 에 오픈 소스 프레임 워 크 를 패키지 하고 500 줄 을 썼 습 니 다.jquery 의 대부분 상용 기능 을 갖 추고 있 습 니 다.그 다음 에 대량의 도구 함수 와 MVVM 양 방향 구동 등 기능 을 확장 할 수 있 습 니 다.jquery 의 사용 방법 과 똑 같 습 니 다.jquery 의 선택 기 는 거의 지원 할 수 있 습 니 다.왜 이 글 의 주제 와 관련 이 있 습 니까?이 글 에서 말 하고 자 하 는 것 은 바로 제 가 프레임 워 크 를 쓰 는 과정 에서 부 딪 힌 문제 입 니 다.jquery 를 패키지 하 는 after 방법 은 DOM 과 html 태그 두 가지 용법 을 지원 합 니 다.html 태그 전 삼 은 html 를 DOM 구조 로 해석 하고 DOM 의 방법 으로 삽입 하 겠 습 니 다.
우선,우 리 는 일반적인 html 라벨 을 씁 니 다.

이 html 는 이벤트,스타일,속성,내용 을 포함 합 니 다.
우 리 는 이어서 정규 로 이 html 의 모든 부분 을 일치 시 켰 다.우리 가 필요 로 하 는 것 은:
1.라벨 이름,dom 노드 를 만 들 때 필요 하기 때 문 입 니 다.
2.속성 과 내용 은 따로 분리 해 야 한다.
dom 을 만 드 는 데 편리 하도록 json 으로 저장 합 니 다.예 를 들 어 이 태그 와 같이 우리 가 처리 해 야 할 최종 결 과 는:

{
id:"test
inner:"this is a test string
name:"test"
onclick:"test();"
style:"color:red;background:green;"
tag:"div"
}

이 구조 가 있 으 면 해당 하 는 키 와 값 을 받 아 dom 로 조립 하면 된다.

var o = document.createElement( obj['tag'] );
  o.innerHTML = obj['inner'];
  delete obj['inner'];
  delete obj['tag'];
  for( var key in obj ){
   o.setAttribute( key, obj[key] );
  } 
  document.body.appendChild( o );

해석 방향 이 명확 하 다 면 html 태그 의 모든 부분 을 정규 표현 식 으로 일치 시 켜 야 합 니 다.

var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;
  var str = '<div onclick="test();" name="test" id="test">this is a test string</div>';
  var res = str.match(re);

음..이것 이 바로 우리 가 일치 하 는 결과 입 니 다.그림 에서 볼 수 있 습 니 다.
res[1]탭 이름 을 저장 합 니 다.양쪽 빈 칸 만 제거 하면 됩 니 다.
res[2]저 장 된 것 은 속성 과 값 입 니 다.우 리 는 split 함수 로 빈 칸 으로 한 번 절단 한 다음 에 split 함수 로'='을 한 번 절단 하면 분해 할 수 있 습 니 다.
res[4]문자열 의 내용 을 저장 합 니 다.
위의 세 부분 은 순환 과 문자열 로 조금 만 처리 하면 목표 결 과 를 얻 을 수 있다.
그러면 완전한 처리 코드 는:

var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;
  var str = '<div onclick="test();" name="test" id="test">this is a test string</div>';
  var res = str.match(re);

  var tagName = null, attrList = [], arr = [], obj = {};
  if( res[1] ) {
   tagName = res[1].trim();
   obj['tag'] = tagName;
  }
  if( res[4] ) {
   obj['inner'] = res[4];
  }
  if ( res[2] ) {
   attrList = res[2].split( /\s+/ );
   for( var i = 0, len = attrList.length; i < len; i++ ){
    arr = attrList[i].split("=");
    // console.log( arr );
    obj[arr[0]] = arr[1].replace( /(^[\'\"]+|[\'\"]$)/g, function(){
     return '';
    } );
   }
  }

  var o = document.createElement( obj['tag'] );
  o.innerHTML = obj['inner'];
  delete obj['inner'];
  delete obj['tag'];
  for( var key in obj ){
   o.setAttribute( key, obj[key] );
  } 
  document.body.appendChild( o );

스스로 함 수 를 포장 할 수 있 습 니 다.쉽게 포장 할 수 있 을 거 라 고 믿 습 니 다.
이상 의[js 고수 의 길]HTML 라벨 은 DOM 노드 의 실현 방법 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 많은 응원 을 바 랍 니 다.