JavaScript에서 HTML 엔터티를 인코딩하는 쉬운 솔루션

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에서 HTML 엔터티를 인코딩하는 쉬운 솔루션
Muhammad Muzammil Hussain 2023년10월12일
JavaScript JavaScript Encode
  1. String.prototype.toHtmlEntities()를 사용하여 문자열을 HTML 엔터티로 인코딩
  2. String.fromHtmlEntities()를 사용하여 HTML 엔터티에서 문자열 인코딩
  3. unescapeHTML() 함수를 사용하여 JavaScript에서 HTML 엔터티 인코딩
JavaScript에서 HTML 엔터티를 인코딩하는 쉬운 솔루션

이 문서에서는 JavaScript에서 HTML 엔터티를 인코딩하는 최상의 솔루션에 대해 설명합니다. 아래 예제 코드는 모든 문자열을 HTML 엔터티로 변환하고 다시 문자열 프로토타입으로 변환합니다.

String.prototype.toHtmlEntities()를 사용하여 문자열을 HTML 엔터티로 인코딩

다음 자바스크립트 코드에서,

  • String.prototype.toHtmlEntities = function()은 .replace() 메서드를 사용하여 HTML 엔터티를 포함하는 문자열을 반환합니다.
  • .replace()는 주어진 문자열의 값을 찾아 새로운 원하는/지정된 값으로 변경합니다.
  • .prototype은 JavaScript의 객체입니다. 기본적으로 기능 및 개체와 연결됩니다.
  • String.charCodeAt()는 문자열에서 인덱스를 설명하는 문자의 유니코드를 반환합니다.
/**
 * Conversion of string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
  return this.replace(/./gm, function(s) {
    // return "&#" + s.charCodeAt(0) + ";";
    return (s.match(/[a-z0-9\s]+/i)) ? s : '&#' + s.charCodeAt(0) + ';';
  });
};

String.fromHtmlEntities()를 사용하여 HTML 엔터티에서 문자열 인코딩

다음 JavaScript 문에서 다음을 생성했습니다.

  • HTML 엔티티를 포함하는 모든 문자열을 수신하는 String.fromHtmlEntities = function(string).
  • 여기 예에서 .replace()의 주어진 문자열 값은 /&#\d+;/gm이며 문자열 s String.fromCharCode를 반환하는 function(s)으로 대체됩니다.
  • String.fromCharCode는 시퀀스에 의해 생성된 문자열을 반환하는 메서드입니다.
/**
 * Creation of string from HTML entities
 */
String.fromHtmlEntities = function(string) {
  return (string + '').replace(/&#\d+;/gm, function(s) {
    return String.fromCharCode(s.match(/\d+/gm)[0]);
  })
};

이후 아래와 같이 기능을 사용합니다.

  • 다음은 특수 문자(†®¥¨©˙∫ø…ˆƒ∆...)를 포함하는 문자열로 초기화되는 변수 var str입니다.
  • 함수 .toHtmlEntities는 이 특수 문자열 var str로 호출됩니다.
  • console.log는 로그 상자에 값을 표시하는 JavaScript의 기본 기능입니다.
var str = "Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

콘솔의 출력은 다음과 같습니다.

"Entities:"
"Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"
"String:"
"Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"

unescapeHTML() 함수를 사용하여 JavaScript에서 HTML 엔터티 인코딩

JavaScript 컴파일러에서 온라인 또는 오프라인으로 이러한 기능을 확인할 수 있습니다. 브라우저가 HTML을 읽지 않고도 string을 표시하는 데 도움이 됩니다. 이것은 다른 방법으로 수행할 수 있습니다. HTML 엔터티의 개체를 만들 수 있습니다.

  • 변수 var htmlEntities에는 특수 문자 및 기호의 개체가 포함됩니다.
  • unescapeHTML(str) 함수는 .replace() 조건의 도움으로 문자열 및 반환 값을 수신합니다.
var htmlEntities = {
  nbsp: ' ',
  cent: '¢',
  pound: '£',
  yen: '¥',
  euro: '€',
  copy: '©',
  reg: '®',
  lt: '<',
  gt: '>',
  quot: '"',
  amp: '&',
  apos: '\''
};

function unescapeHTML(str) {
  return str.replace(/\&([^;]+);/g, function(entity, entityCode) {
    var match;

    if (entityCode in htmlEntities) {
      return htmlEntities[entityCode];
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
      return String.fromCharCode(parseInt(match[1], 16));
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#(\d+)$/)) {
      return String.fromCharCode(~~match[1]);
    } else {
      return entity;
    }
  });
};

JavaScript에는 HTML 엔티티의 기본 버전이 없습니다. 브라우저가 HTML로 해석하지 않도록 기본 사항만 필요한 경우. 각 PHP의 로컬 용량을 JavaScript로 이식하는 작업인 PHP.js 프로젝트에도 모델이 포함되어 있습니다. 이 라인을 따라 나는 그것을 간단하게 유지하고 아래를 활용했습니다.

function EntitiesHtml(string) {
  return String(string)
      .replace(/&/g, '&amp;')
      .replace(/>/g, '&gt;')
      .replace(/</g, '&lt;')
      .replace(/"/g, '&quot;');
}