Unescape HTML entities in Javascript Unescape HTML 을 html 코드 로 변환
2979 단어 JavaScript
javascript 에서 표준 dom 대상 을 동적 으로 만 드 는 데 사용 합 니 다:
var obj = document.createElement('div');
그리고 obj 에 속성 을 설정 합 니 다.
그러나 실제 사용 과정 에서 어떤 사람들 은 이렇게 표준적 인 dom 대상 을 만 들 수 있 었 으 면 좋 겠 다 고 생각 할 수도 있다
의사 코드: var obj = strToDom ('< div id =' div 1 'class =' div 1 '> Hello World! < / div >);
그러면 오늘 의 목적 은 문자열 을 표준 dom 대상 으로 직접 변환 하 는 방법 을 가르쳐 주 는 것 입 니 다.
start: 사실 이러한 전환 을 실현 하 는 것 은 매우 간단 합 니 다. 여 기 는 주로 하나의 속성 인 innerHTML 을 이용 합 니 다.
innerHTML, 저 는 모두 가 사용 한 적 이 있다 고 믿 습 니 다. 특히 동적 으로 한 요소 에 내용 을 삽입 할 때 사용 합 니 다. 여기 서 저 는 innerHTML 을 소개 하 는 것 이 익숙 하지 않 은 사람 에 게 편리 합 니 다.
innerHTML 은 w3c 기준 이 아니 라 ie 발명 으로 만들어 진 것 입 니 다. 그러나 이 속성의 편의 성 으로 인해 그 당시 마이크로 보스 의 위치 와 다른 비 ie 브 라 우 저 에 도 innerHTML 이 내장 되 어 지원 되 었 습 니 다.
innerHTML 은 w3c 기준 이 아니 지만 사실 기준 입 니 다. 이 사실 기준 은 매우 중요 합 니 다. 즉, 현재 주류 브 라 우 저 는 모두 innerHTML 을 지원 하기 때문에 자 연 스 럽 게 다 중 브 라 우 저 를 호 환 할 수 있 습 니 다.
function parseDom(arg) { // Unescape HTML entities in Javascript
var e = document.createElement("div");
e.innerHTML = arg;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
짧 은 몇 줄 의 코드 로 전환 이 이 루어 졌 습 니 다. 우 리 는 먼저 표준 적 인 방법 으로 div 를 만 들 고 innerHTML 로 요 소 를 삽입 합 니 다. 사실은 브 라 우 저 자체 의 커 널 알고리즘 을 이용 하여 이 루어 진 전환 입 니 다.child Nodes 로 되 돌아 오고 있 습 니 다.
이렇게 해서 우 리 는 하나의 문자열 에서 표준 dom 로 의 전환 을 완 성 했 습 니 다. 브 라 우 저 자체 의 알고리즘 을 교묘 하 게 이용 하여 간단 한 소량의 코드 로 대량의 복잡 한 전환 을 완성 할 수 있 습 니 다. 우 리 는 문자열 을 분석 하지 않 고 브 라 우 저 자신 에 게 맡 겨 서 완성 할 수 있 습 니 다. 이렇게 하면 정확 하면 서도 틀림 이 없습니다.
사용:
var htmContent = "<strong>oijksdjfiojwioejriowejrwejiorjwer<img src="/_files_/wysiwyg/image/20140723/20140723200343_557.jpg" alt="" /></strong> ";
function parseDom(arg) { // Unescape HTML entities in Javascript
var e = document.createElement("div");
e.innerHTML = arg;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
console.log(parseDom(htmContent));
주의:
childNodes 는 유사 한 배열 의 list 를 되 돌려 줍 니 다.따라서 하나의 요소 라면 이 dom 을 사용 하려 면 obj [0] 를 이렇게 사용 해 야 합 니 다.같은 등급 의 dom 변환 이 여러 개 라면 obj [0], obj [1] 를 이렇게 사용 할 수 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.