HOWTO · JavaScript

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

JavaScript에서 HTML 엔터티를 인코딩합니다.

작성자 Muhammad Muzammil Hussain게시일 2022-01-15업데이트 2023-10-12
이 페이지의 내용

이 문서에서는 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;');
}

작성자 소개

Muhammad Muzammil Hussain

작성자 프로필 보기