누구나 jQuery의 문자열에서 HTML을 이스케이프하는 쉬운 방법을 알고 있습니까? 임의의 문자열을 전달할 수 있어야하고 HTML 페이지에 표시하기 위해 올바르게 이스케이프해야합니다 (JavaScript / HTML 주입 공격 방지). 나는 이것을하기 위해 jQuery를 확장 할 수 있다고 확신하지만, 이것을 달성하기 위해 현재 프레임 워크에 대해 충분히 모른다.
답변
jQuery를 사용 하고 있으므로 요소의 text속성을 설정할 수 있습니다 .
// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";
// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after:
// <div class="someClass"><script>alert('hi!');</script></div>
// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value:
// <script>alert('hi!');</script>답변
mustache.js의 솔루션 도 있습니다
var entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escapeHtml (string) {
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}답변
$('<div/>').text('This is fun & stuff').html(); // "This is fun & stuff"출처 : http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
답변
HTML을 피하고 있다면 실제로 필요한 것은 세 가지뿐입니다.
html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");사용 사례에 따라, 당신은 또한 같은 일을해야 할 수도 있습니다 "에 ". 목록이 충분히 커지면 배열을 사용합니다.
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace)
escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);encodeURIComponent() HTML이 아닌 URL에 대해서만 이스케이프합니다.
답변
밑줄을 쉽게 사용할 수 있습니다.
_.escape(string) Underscore 는 기본 js가 제공하지 않는 많은 기능을 제공하는 유틸리티 라이브러리입니다. 밑줄과 동일한 API이지만 더 성능이 좋도록 다시 작성된 lodash 도 있습니다.
답변
나는 이것을하는 작은 기능을 썼습니다. 그것은 단지 탈출 ", &, <과 >(그러나 보통 그 모든 어쨌든 필요이다). 그것은 다음은 사용에 앞서 제안 된 솔루션을 약간 더 우아한 하나를 .replace() 모든 변환을 수행 할 수 있습니다. ( 편집 2 : 코드 복잡성이 감소하여 기능이 훨씬 작고 깔끔해졌습니다. 원래 코드에 대해 궁금한 경우이 답변의 끝 부분을 참조하십시오.)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}이것은 일반 자바 스크립트이며 jQuery는 사용하지 않습니다.
이스케이프 /와 '너무
mklement 의 의견 에 따라 편집하십시오 .
위의 기능은 문자를 포함하도록 쉽게 확장 할 수 있습니다. 이스케이프 할 문자를 더 지정하려면 문자 클래스의 정규 표현식 (예 🙂 /[...]/g과 chr객체 의 항목에 모두 삽입하면 됩니다. ( 편집 2 : 같은 방식으로이 기능도 단축되었습니다.)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}위의 '아포스트로피 사용에 유의하십시오 (기호 엔티티 '는 대신 사용되었을 수 있습니다. XML로 정의되었지만 원래 HTML 스펙에 포함되지 않았으므로 모든 브라우저에서 지원되지 않을 수 있습니다) : HTML 문자 인코딩에 대한 위키피디아 기사 ). 또한 16 진수를 사용하는 것보다 10 진수 엔터티를 사용하는 것이 더 광범위하게 지원된다는 내용을 읽었지만 지금은 그 소스를 찾을 수 없습니다. 16 진수 엔터티를 지원하지 않는 브라우저는 많을 수 없습니다.
주 : 추가 /및 '그들이 HTML에서 특별한 의미를 가지고 있지 않으며하지 않기 때문에 탈출 문자 목록에 모든 것을 유용하지 않습니다 필요 이스케이프 할 수 있습니다.
원래 escapeHtml기능
편집 2 : 원래 함수는 변수 ( chr)를 사용하여 .replace()콜백에 필요한 객체를 저장했습니다 . 이 변수에는 범위를 지정하기 위해 추가 익명 함수가 필요했기 때문에 함수가 조금 더 크고 복잡해졌습니다.
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());두 버전 중 어느 것이 더 빠른지 테스트하지 않았습니다. 그렇다면 여기에 정보와 링크를 추가하십시오.
답변
나는이 파티에 얼마나 늦었는지 알고 있지만 jQuery가 필요없는 매우 쉬운 솔루션을 가지고 있습니다.
escaped = new Option(unescaped).innerHTML;편집 : 따옴표를 이스케이프하지 않습니다. 따옴표를 이스케이프해야하는 유일한 경우는 내용을 HTML 문자열 내 속성에 인라인으로 붙여 넣는 경우입니다. 이 작업을 수행하는 것이 좋은 디자인 일 경우를 상상하기가 어렵습니다.
편집 3 : 가장 빠른 해결책은 Saram에서 위의 답변을 확인하십시오. 가장 짧습니다.
