[javascript] JavaScript 또는 jQuery에서 HTML을 정규화하는 방법은 무엇입니까?

Program / 글쓴이

태그는 여러 속성을 가질 수 있습니다. 코드에서 속성이 나타나는 순서는 중요하지 않습니다. 예를 들면 :

<a href="#" title="#">
<a title="#" href="#">

Javascript에서 HTML을 “정규화”하여 속성의 순서가 항상 동일하도록하려면 어떻게해야합니까? 항상 같은 순서라면 어떤 순서를 선택하든 상관 없습니다.

업데이트 : 나의 원래 목표는 약간의 차이가있는 2 개의 HTML 페이지를 (자바 스크립트에서) 쉽게 비교하는 것이 었습니다. 사용자가 다른 소프트웨어를 사용하여 코드를 편집 할 수 있기 때문에 속성의 순서가 변경 될 수 있습니다. 이것은 diff를 너무 장황하게 만듭니다.

답변 : 먼저 모든 답변에 감사드립니다. 그리고 예, 가능합니다. 내가 그것을 어떻게 관리했는지는 다음과 같습니다. 이것은 개념 증명이며 확실히 최적화 할 수 있습니다.

function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
}

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.push(attributes[i]);
    }

    list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

    for(var i = 0; i < list.length; i++) {
      this.setAttribute(list[i].name, list[i].value);
    }
  }
});

diff의 두 번째 요소 인 $('#different'). 지금 $('#original').html()과 $('#different').html()같은 순서로 속성을 보여 HTML 코드입니다.

답변

JavaScript는 실제로 텍스트 기반 HTML 형태의 웹 페이지가 아니라 DOM 또는 문서 객체 모델로 알려진 트리 구조로 표시됩니다. DOM에서 HTML 요소 속성의 순서는 정의되지 않았으므로 (사실 Svend 주석처럼 DOM의 일부가 아닙니다) JavaScript가 실행되는 지점에서 정렬하는 아이디어는 무관합니다.

나는 당신이 달성하려는 것을 추측 할 수 있습니다. JavaScript / 페이지 성능을 개선하기 위해이 작업을 수행하려는 경우 대부분의 HTML 문서 렌더러는 이미 속성 액세스를 최적화하는 데 많은 노력을 기울 였으므로 얻을 수있는 것이 거의 없습니다.

페이지가 유선으로 전송 될 때 페이지의 gzip 압축을 더 효과적으로 만들기 위해 속성을 주문하려는 경우 JavaScript가 해당 시점 이후에 실행된다는 점을 이해하십시오. 대신 서버 측에서 실행되는 항목을보고 싶을 수도 있지만, 그럴 가치가있는 것보다 문제가 더 많을 것입니다.

답변

HTML을 가져와 DOM 구조로 파싱합니다. 그런 다음 DOM 구조를 가져 와서 HTML에 다시 작성합니다. 쓰는 동안 안정적인 정렬을 사용하여 속성을 정렬하십시오. 이제 HTML이 속성과 관련하여 정규화됩니다.

이것은 일을 정상화하는 일반적인 방법입니다. (비정규 화 된 데이터를 구문 분석 한 다음 정규화 된 형식으로 다시 작성).

HTML 정규화를 원하는 이유를 잘 모르겠지만 거기에 있습니다. 데이터는 데이터입니다. 😉

답변

이것은 개념 증명이며 확실히 최적화 할 수 있습니다.

function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
 }

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.push(attributes[i]);
    }

     list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

     for(var i = 0; i < list.length; i++) {
       this.setAttribute(list[i].name, list[i].value);
    }
  }
 });

diff의 두 번째 요소 인 $ ( ‘# different’)도 마찬가지입니다. 이제 $ ( ‘# original’). html () 및 $ ( ‘# different’). html ()은 동일한 순서로 속성이있는 HTML 코드를 표시합니다.

답변

방화범에서 HTML 탭을 열어 볼 수 있으며 속성은 항상 동일한 순서입니다.

답변

사실 몇 가지 좋은 이유를 생각할 수 있습니다. 하나는 신원 매칭과 의미 상 동등한 라인이 “다름”으로 표시 될 수있는 ‘diff’유형 도구와 함께 사용하기위한 비교입니다.

진짜 질문은 “Why in Javascript”입니다.

이 질문은 “문제가 있고 대답이있는 것 같습니다.하지만 제 대답에도 문제가 있습니다.”라는 “냄새가납니다.”

OP가 왜 이렇게 하려는지 설명한다면 좋은 답변을 얻을 가능성이 극적으로 높아질 것입니다.

답변

“이것의 필요성이 무엇입니까?”라는 질문 답변 : 코드를 더 읽기 쉽고 이해하기 쉽게 만듭니다.

대부분의 UI가 짜증나는 이유 … 많은 프로그래머가 사용자 작업을 단순화해야 할 필요성을 이해하지 못합니다. 이 경우 사용자 작업은 코드를 읽고 이해하는 것입니다. 속성을 주문하는 한 가지 이유는 코드를 디버그하고 유지 관리해야하는 사람을위한 것입니다. 프로그램에 익숙해지는 순서가 지정된 목록은 작업을 더 쉽게 만듭니다. 더 빨리 속성을 찾거나 누락 된 속성을 인식하고 속성 값을 더 빠르게 변경할 수 있습니다.

답변

이것은 누군가가 소스를 읽을 때만 중요하므로 저에게는 의미 론적 속성이 먼저이고 다음은 의미 론적 속성이 적습니다.

물론 예외가 있습니다. 예를 들어 연속 된 <li>가 있고 각각에 하나의 속성이 있고 일부에만 다른 속성이있는 경우 공유 된 항목이 모두 처음에 있고 그 뒤에 개별 항목이 오는지 확인할 수 있습니다. 예를 들어 .

<li a = “x”> A </ li>
<li a = “y”b = “t”> B </ li>
<li a = “z”> C </ li>

( “b”속성이 “a”보다 의미 상 더 유용하더라도)

당신은 아이디어를 얻습니다.