자바스크립트나 jQuery에서 HTML을 정규화하는 방법은?

자바스크립트나 jQuery에서 HTML을 정규화하는 방법은?

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

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

속성의 순서가 항상 같도록 HTML을 자바스크립트로 "정규화"하려면 어떻게 해야 합니까?어떤 순서가 선택되든 상관없어요, 항상 똑같다면요.

업데이트: 원래 목표는 약간의 차이가 있는 2개의 HTML 페이지를 쉽게 디핑(JavaScript에서)하는 것이었습니다.사용자가 코드를 편집하기 위해 다른 소프트웨어를 사용할 수 있기 때문에 속성의 순서가 바뀔 수 있습니다.이것은 차이를 너무 장황하게 만듭니다.

답변: 우선 모든 답변에 감사드립니다.그리고 네, 가능합니다.제가 어떻게 해냈는지는 이렇습니다.이는 개념 증명이므로 최적화할 수 있습니다.

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 형태의 웹 페이지를 보지 않고, DOM 또는 Document Object Model로 알려진 트리 구조로 봅니다.DOM에서 HTML 요소 속성의 순서는 정의되어 있지 않습니다(실제로 Svend comments처럼 DOM의 일부도 아닙니다). 따라서 자바스크립트가 실행되는 지점에서 이를 정렬하는 아이디어는 무관합니다.

나는 당신이 무엇을 성취하려고 하는지 추측할 수 있을 뿐입니다.자바스크립트/페이지 성능을 향상시키기 위해 이를 시도한다면, 대부분의 HTML 문서 렌더링자들은 이미 속성 접근을 최적화하는 데 많은 노력을 기울였으므로 거기서 얻을 수 있는 것은 거의 없습니다.

만약 당신이 gzip 압축을 더 효과적으로 만들기 위해 속성을 주문하려고 한다면, 자바스크립트가 그 시점 이후에 실행된다는 것을 이해하세요.그 대신 서버 측에서 실행되는 것을 검토해 보는 것이 좋을 수도 있지만, 그보다는 문제가 더 많을 수도 있습니다.

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 코드를 보여줍니다.

firebug에서 HTML 탭을 열려고 시도할 수 있습니다. 속성은 항상 같은 순서입니다.

사실, 몇 가지 좋은 이유를 생각해 낼 수 있습니다.하나는 아이덴티티 매칭과 의미론적으로 동등한 선들이 "다른"으로 표시될 수 있다는 것이 상당히 짜증나는 'diff' 유형의 도구와 사용하는 것을 비교하는 것입니다.

진짜 질문은 "왜 자바스크립트로?" 입니다.

"나한테 문제가 있는데 답이 있는 것 같아"라는 이 질문은 냄새가 납니다.하지만 제 대답에도 문제가 있습니다."

OP가 왜 그렇게 하고 싶은지 설명한다면, 좋은 답변을 얻을 가능성은 엄청나게 높아질 것입니다.

"이것에 대한 필요성은 무엇인가?"라는 질문입니다.답변:이것은 코드를 더 읽기 쉽고 이해하기 쉽게 만듭니다.

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

누군가 출처를 읽을 때만 중요하죠 그래서 저는 의미적 속성이 먼저고 다음은 의미적 속성이 덜...

물론 예외가 있습니다. 예를 들어 연속적으로 <li> 속성이 하나씩 있고 다른 속성이 일부에만 있는 경우 공유된 속성이 모두 시작에 있고 개별 속성이 뒤에 있는지 확인하는 것이 좋습니다.

<lia="x">A</li>
<lia="y" b="t">B</li>
<lia="z">C</li>

("a"보다 "b" 속성이 의미적으로 더 유용하더라도)

당신이 이해합니다.

제 생각에 HTML 내용을 xml로 전달하고 xslt를 통해 렌더링하면 실제로 가능합니다.따라서 XML의 원본 컨텐츠는 원하는 순서대로 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/3974734/how-to-normalize-html-in-javascript-or-jquery