프론트 엔드 개발에서는 종종 HTML의 왼쪽 및 직각 괄호를 엔터티 형태로 탈출해야합니다. 우리는 <,>, 등을 표시 할 수 없습니다. 마지막으로 웹 페이지에 직접 표시됩니다. 웹 페이지에 표시되기 전에 탈출해야합니다.
탈출 시퀀스를 문자 엔티티라고도합니다. 탈출 한 줄을 정의하는 주된 이유는입니다
"<"및 ">"와 같은 기호는 HTML 태그를 나타내는 데 사용되었으므로 텍스트의 기호로 직접 사용할 수 없습니다. 그러나 때로는 HTML 페이지에서 이러한 기호를 사용해야하므로 탈출 문자열을 정의해야합니다.
일부 문자는 ASCII 문자 세트 (예 : 저작권 기호 "©")에 정의되지 않습니다. 따라서 이스케이프 캐릭터 ( "©"is "©"에 해당하는 탈출 문자를 사용하여 이스케이프 문자를 사용해야합니다.
다음은 Escape와 Escape의 두 가지 기능이 있습니다.이 기능은 각각 HTML의 탈출을 엔티티로 구현하고 회전합니다.
방법 1. 매핑 테이블 + 일반 교체
코드 사본은 다음과 같습니다.
var keys = Object.keys || 함수 (obj) {
obj = 객체 (obj)
var arr = []
for (var a in obj) arr.push (a)
반환 ARR
}
var unvert = function (obj) {
obj = 객체 (obj)
var result = {}
(var a in obj) 결과 [obj [a]] = a
반환 결과
}
var entityMap = {
탈출하다: {
'&': '&',
'<': '<',
'>': '>',
' "': '"',
" '":' ''
}
}
EntityMap.unescape = 반전 (EntityMap.escape)
var entityreg = {
탈출 : regexp ( '[' + keys (entitymap.escape) .join ( '') + '],'g '),
Unescape : regexp ( '(' + keys (entityMap.unescape) .join ( '|') + '),'g ')
}
// html을 Entity로 탈출합니다
기능 탈출 (HTML) {
if (html typeof! == 'string') reto '' '
return html.replace (entityreg.escape, function (match) {
return entitymap.escape [match]
})
}
// 엔티티를 HTML로 다시 돌립니다
함수 unescape (str) {
if (typeof str! == 'string') reto '' '
return str.replace (entityreg.unescape, function (match) {
return entitymap.unescape [match]
})
}
방법 2 : 브라우저 Dom API 사용
코드 사본은 다음과 같습니다.
// html을 Entity로 탈출합니다
기능 탈출 (HTML) {
var elem = document.createelement ( 'div')
var txt = document.creatextNode (HTML)
Elem.appendChild (TXT)
elem.innerhtml을 반환합니다.
}
// 엔티티를 HTML로 다시 돌립니다
함수 unescape (str) {
var elem = document.createelement ( 'div')
elem.innerhtml = str
elem.innertext ||를 반환합니다 elem.textContent
}
"<> &"만 탈출 할 수있는 결함이 있으며, 단일 인용구의 경우 이중 인용문이 탈출되지 않습니다. 다른 비 ASCII도 탈출 할 수 없습니다. 선택할 때주의를 기울이십시오.
비교하다:
방법 1 코드 볼륨은 크지 만 유연성과 무결성은 방법 2보다 우수합니다. 요구 사항에 따라 매핑 테이블 엔티티 맵을 추가하거나 줄일 수 있으며 모든 JS 환경에서 실행할 수 있습니다.
방법 2는 훨씬 적은 양의 코드를 갖춘 해킹 방법이며 브라우저의 내부 API를 사용하여 탈출하여 리디렉션 할 수 있습니다 (주류 브라우저 모두 지원). 완전하지 않으며 브라우저 환경 (예 : Node.js에서 실행되지 않음)에서만 사용할 수 있음이 분명합니다.