How to Escape HTML Special Chars in JavaScript

Can I escape HTML special chars in JavaScript?

Here's a solution that will work in practically every web browser:

function escapeHtml(unsafe)
{
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "<")
         .replace(/>/g, ">")
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }

If you only support modern web browsers (2020+), then you can use the new replaceAll function:

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

What is the HtmlSpecialChars equivalent in JavaScript?

There is a problem with your solution code--it will only escape the first occurrence of each special character. For example:

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip's <b>evil</b> "test" code's here
Expected: Kip's <b>evil</b> "test" code's here

Here is code that works properly:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "<")
      .replace(/>/g, ">")
      .replace(/"/g, """)
      .replace(/'/g, "'");
}

Update

The following code will produce identical results to the above, but it performs better, particularly on large blocks of text (thanks jbo5112).

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

How to escape special characters(,,,',&) in Javascript & pass escaped data from one text box to another?

You can use '"' : '"'

Convert special characters to HTML in JavaScript

You need a function that does something like

return mystring.replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);

But taking into account your desire for different handling of single/double quotes.

Js escape special characters

Those escaped chars are only readable by HTML.

A quick and dirty way if you want to handle them in the JS code (with JQuery though) is by adding them to an element and reading the output, otherwise if you just want to display your output somewhere in the page, it's super easy :)

See both examples below:

var myString = "àèìòù";
var escaped = $('<textarea />').html(myString).text();alert(escaped);
document.getElementById("myElement").innerHTML = myString;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><span id="myElement">a</span>

function unescapeHtml(unsafe) {    return unsafe         .replace(/&/g, "&")         .replace(/</g, "<")         .replace(/>/g, ">")         .replace(/"/g, '"')         .replace(/'/g, "'")      }
function escapeHtml(unsafe) {    return unsafe         .replace(/&/g, "&")         .replace(/</g, "<")         .replace(/>/g, ">")         .replace(/"/g, """)         .replace(/'/g, "'");}function setText(id, text){
   document.getElementById(id).innerHTML = escapeHtml(unescapeHtml(text))} 
var str1 = "A & B & C";var str2 = "A > B > C";var str3 = "A&B&C"var str4 = "A"B" C ""   setText("container1", str1); setText("container2", str2);setText("container3", str3);setText("container4", str4);

<div id="container1"></div><div id="container2"></div><div id="container3"></div><div id="container4"></div>

<td class="description hide" id="${doc.id}"><c:out value="${doc.description}"/></td>

$("#${doc.id}").show();