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");
$As = $('a', $doc);
다음 함수 parseHTML는 다음 중 하나를 반환합니다.
Document파일은 문서 타입으로 시작할 때.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');
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
const parse = Range.prototype.createContextualFragment.bind(document.createRange());
document.body.appendChild( parse('<p><strong>Today is:</strong></p>') ),
document.body.appendChild( parse(`<p style="background: #eee">${new Date()}</p>`) );
Node부모 Node(의 시작)
내의
유효한 자식 만
Range구문 분석됩니다. 그렇지 않으면 예기치 않은 결과가 발생할 수 있습니다.
// <body> is "parent" Node, start of Range
const parseRange = document.createRange();
const parse = Range.prototype.createContextualFragment.bind(parseRange);
// Returns Text "1 2" because td, tr, tbody are not valid children of <body>
parse('<td>1</td> <td>2</td>');
parse('<tr><td>1</td> <td>2</td></tr>');
parse('<tbody><tr><td>1</td> <td>2</td></tr></tbody>');
// Returns <table>, which is a valid child of <body>
parse('<table> <td>1</td> <td>2</td> </table>');
parse('<table> <tr> <td>1</td> <td>2</td> </tr> </table>');
parse('<table> <tbody> <td>1</td> <td>2</td> </tbody> </table>');
// <tr> is parent Node, start of Range
parseRange.setStart(document.createElement('tr'), 0);
// Returns [<td>, <td>] element array
parse('<td>1</td> <td>2</td>');
parse('<tr> <td>1</td> <td>2</td> </tr>');
parse('<tbody> <td>1</td> <td>2</td> </tbody>');
parse('<table> <td>1</td> <td>2</td> </table>');
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를 사용합니다.
참고 URL : https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js
'IT story' 카테고리의 다른 글
| ASP.NET Core 웹 API 예외 처리 (0) | 2020.04.22 |
|---|---|
| ASP.NET MVC 컨트롤러 메소드에서 JSON.NET으로 직렬화 된 camelCase JSON을 어떻게 반환 할 수 있습니까? (0) | 2020.04.22 |
| Moq를 사용하여 처음과 두 번째에 다른 반환 값 (0) | 2020.04.22 |
| 새 응용 프로그램을 작성할 때 사용할 레일 버전 지정 (0) | 2020.04.22 |
| 스칼라에서 이름으로 전화 및 값으로 전화, 설명 필요 (0) | 2020.04.22 |