[javascript] JS로 HTML 문자열 구문 분석

솔루션을 검색했지만 관련성이 없으므로 여기 내 문제가 있습니다.

HTML 텍스트가 포함 된 문자열을 구문 분석하고 싶습니다. JavaScript로하고 싶습니다.

이 라이브러리를 사용해 보았지만 문자열이 아닌 현재 페이지의 HTML을 구문 분석하는 것 같습니다. 아래 코드를 시도하면 페이지 제목이 변경되므로

var parser = new HTMLtoDOM("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>", document);

내 목표는 문자열처럼 읽은 HTML 외부 페이지에서 링크를 추출하는 것입니다.

API를 알고 있습니까?

답변

더미 DOM 요소를 만들고 문자열을 추가하십시오. 그런 다음 DOM 요소처럼 조작 할 수 있습니다.

var el = document.createElement( 'html' );
el.innerHTML = "<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>";

el.getElementsByTagName( 'a' ); // Live NodeList of your anchor elements

편집 : 팬을 기쁘게하기 위해 jQuery 답변을 추가하십시오!

var el = $( '<div></div>' );
el.html("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>");

$('a', el) // All the anchor elements

답변

아주 간단합니다 :

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(txt, 'text/html');
// do whatever you want with htmlDoc.getElementsByTagName('a');

MDN에 따르면 크롬 에서이 작업을 수행하려면 다음과 같이 XML로 구문 분석해야합니다.

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(txt, 'text/xml');
// do whatever you want with htmlDoc.getElementsByTagName('a');

~~현재 웹킷에서 지원되지 않으며 Florian의 답변을 따라야하며 대부분의 경우 모바일 브라우저에서 작동하지 않습니다.~~

편집 : 이제 널리 지원

답변

편집 : 아래 솔루션은 html, 헤드 및 바디가 제거되므로 HTML “조각”에만 해당됩니다. 이 질문에 대한 해결책은 DOMParser의 parseFromString () 메소드라고 생각합니다.

HTML 조각의 경우 여기에 나열된 솔루션은 대부분의 HTML에서 작동하지만 특정 경우에는 작동하지 않습니다.

예를 들어 파싱을 시도하십시오 <td>Test</td>. 이것은 div.innerHTML 솔루션이나 DOMParser.prototype.parseFromString 또는 range.createContextualFragment 솔루션에서 작동하지 않습니다. td 태그가 사라지고 텍스트 만 남습니다.

jQuery 만 해당 사례를 잘 처리합니다.

향후 솔루션 (MS Edge 13+)은 템플릿 태그를 사용하는 것입니다.

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content.cloneNode(true);
}

var documentFragment = parseHTML('<td>Test</td>');

이전 버전의 브라우저를 들어 내가 독립적 인 요점으로 jQuery의 parseHTML () 메소드를 추출한 – https://gist.github.com/Munawwar/6e6362dbdf77c7865a99

답변

var doc = new DOMParser().parseFromString(html, "text/html");
var links = doc.querySelectorAll("a");

답변

Chrome 및 Firefox에서 HTML을 구문 분석하는 가장 빠른 방법은 Range # createContextualFragment입니다.

var range = document.createRange();
range.selectNode(document.body); // required in Safari
var fragment = range.createContextualFragment('<h1>html...</h1>');
var firstNode = fragment.firstChild;

가능한 경우 createContextualFragment를 사용하고 그렇지 않으면 innerHTML로 대체되는 도우미 함수를 만드는 것이 좋습니다.

벤치 마크 : http://jsperf.com/domparser-vs-createelement-innerhtml/3

답변

다음 함수 parseHTML는 다음 중 하나를 반환합니다.

Document파일이 doctype으로 시작 하는 경우
DocumentFragment파일은 문서 타입으로 시작되지 않을 때.

코드 :

function parseHTML(markup) {
    if (markup.toLowerCase().trim().indexOf('<!doctype') === 0) {
        var doc = document.implementation.createHTMLDocument("");
        doc.documentElement.innerHTML = markup;
        return doc;
    } else if ('content' in document.createElement('template')) {
       // Template tag exists!
       var el = document.createElement('template');
       el.innerHTML = markup;
       return el.content;
    } else {
       // Template tag doesn't exist!
       var docfrag = document.createDocumentFragment();
       var el = document.createElement('body');
       el.innerHTML = markup;
       for (i = 0; 0 < el.childNodes.length;) {
           docfrag.appendChild(el.childNodes[i]);
       }
       return docfrag;
    }
}

사용하는 방법 :

var links = parseHTML('<!doctype html><html><head></head><body><a>Link 1</a><a>Link 2</a></body></html>').getElementsByTagName('a');

답변

jQuery를 사용할 수 있다면 HTML 문자열에서 분리 된 DOM 요소를 만드는 훌륭한 기능이 있습니다. 그런 다음 일반적인 수단을 통해 쿼리 할 수 있습니다 (예 :

var html = "<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>";
var anchors = $('<div/>').append(html).find('a').get();

편집-방금 @Florian의 답변을 보았습니다. 이것은 기본적으로 그가 말한 것과 동일하지만 jQuery를 사용합니다.