HTML의 왼쪽 및 오른쪽 꺾쇠괄호를 엔터티 form_javascript 기술로 이스케이프하는 두 가지 방법

프런트 엔드 개발 작업에서는 HTML의 왼쪽 및 오른쪽 꺾쇠 괄호를 엔터티 형식으로 이스케이프해야 하는 경우가 많습니다. 최종 웹페이지에 <, >, & 등을 직접 표시할 수는 없습니다. 웹페이지에 표시하려면 먼저 이스케이프 처리해야 합니다.

Escape Sequence를 Character Entity라고도 합니다. 이스케이프 문자열을 정의하는 주된 이유는

, "<" 및 ">"와 같은 기호가 HTML 태그를 나타내는 데 사용되었기 때문에 텍스트에서 직접 기호로 사용할 수 없기 때문입니다. 그러나 HTML 페이지에서 이러한 기호를 사용해야 하는 경우가 있으므로 이스케이프 문자열을 정의해야 합니다.
일부 문자는 ASCII 문자 집합에 정의되어 있지 않습니다(예: 저작권 기호 "©"). 따라서 이스케이프 문자를 사용해야 합니다("©"에 해당하는 이스케이프 문자는 "©"임).

HTML을 각각 엔터티로 이스케이프하고 반전시키기 위해 두 가지 기능 이스케이프 및 이스케이프 해제가 여기에 제공됩니다.

방법 1, 매핑 테이블로 정기적 교체

코드 복사 코드는 다음과 같습니다

varkeys = Object.keys || function(obj) {
obj = Object(obj)
var arr = []
for (var a in obj) arr.push (a)
return arr
}
var invert = function(obj) {
obj = Object(obj)
var result = {}
for(var a in obj) result[obj[a ]] = a
결과 반환
}
varentityMap = {
escape: {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}
}
entityMap.unescape = invert (entityMap.escape)
varentityReg = {
escape: RegExp('[' 키(entityMap.escape).join('') ']', 'g'),
unescape: RegExp( '(' 키(entityMap.unescape).join('|') ')', 'g')
}

// HTML을 엔터티로 이스케이프
함수 이스케이프 (html) {
if (typeof html !== 'string') return ''
return html.replace(entityReg.escape, function(match) {
returnentityMap.escape[match]
})
}
// 엔터티를 다시 HTML로 변환
function unescape(str) {
if (typeof str !== 'string') return ''
return str.replace (entityReg .unescape, function(match) {
returnentityMap.unescape[match]
})
}

방법 2. 브라우저 DOM API 사용

코드 복사 코드는 다음과 같습니다.

// HTML을 엔터티로 이스케이프
function escape(html) {
var elem = document.createElement('div')
var txt = document.createTextNode(html)
elem.appendChild(txt)
return elem.innerHTML; >/ / 엔터티를 다시 HTML로 변환
function unescape(str) {
var elem = document.createElement('div')
elem.innerHTML = str
return elem.innerText || textContent
}


한 가지 결점은 "< > &"만 이스케이프할 수 있다는 점입니다. 작은따옴표와 큰따옴표는 이스케이프되지 않습니다. 또한 일부 비ASCII 문자는 이스케이프할 수 없습니다. 선택할 때주의하십시오.

비교:

방법 1의 코드 양은 많지만 방법 2보다 유연성과 완성도가 더 좋습니다. 매핑 테이블인 엔터티맵은 필요에 따라 추가하거나 축소할 수 있으며, 모든 JS 환경에서 실행될 수 있습니다.

방법 2는 훨씬 적은 코드를 사용하는 해킹 방법입니다. 브라우저의 내부 API를 사용하여 이스케이프 및 반전을 수행할 수 있습니다(모든 주요 브라우저에서 지원됨). 완전하지 않으며 브라우저 환경에서만 사용할 수 있습니다(예: Node.js에서는 실행할 수 없음).