How to Effectively Escape HTML Characters in JavaScript?

How to Perform HTML Character Escaping in JavaScript

When working with HTML data in JavaScript, it's often necessary to escape special characters such as <, >, and & to prevent them from being interpreted as markup syntax. While PHP provides a native function called htmlspecialchars for this purpose, JavaScript does not have a direct equivalent.

Implementing an HTML Character Escaping Function

To emulate the functionality of htmlspecialchars in JavaScript, you can create a custom function. However, using a built-in function is preferable if available.

ES6 Template Literals

ES6 introduced template literals, which offer a convenient way to escape HTML characters. However, this approach only escapes the first occurrence of each special character, leading to incorrect results for strings containing multiple instances of the same character.

Custom Replacement Function

To ensure proper escaping, a custom replacement function can be used. This function replaces each special character with its corresponding HTML entity:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "&amp;lt;")
      .replace(/>/g, "&amp;gt;")
      .replace(/&quot;/g, "&amp;quot;")
      .replace(/'/g, "&#039;");
}

Using a Character Map

For improved performance with large text blocks, a character map can be used to replace special characters more efficiently:

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&amp;lt;',
    '>': '&amp;gt;',
    '&quot;': '&amp;quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&amp;<>&quot;']/g, function(m) { return map[m]; });
}

By using these techniques, you can effectively escape HTML characters in JavaScript, ensuring that they are displayed correctly in HTML documents.

The above is the detailed content of How to Effectively Escape HTML Characters in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!