151

How can I convert special characters to HTML in JavaScript?

Example:

  • & (ampersand) becomes &amp.
  • " (double quote) becomes &quot when ENT_NOQUOTES is not set.
  • ' (single quote) becomes &#039 only when ENT_QUOTES is set.
  • < (less than) becomes &lt.
  • > (greater than) becomes &gt.
3

27 Answers 27

227

The best way in my opinion is to use the browser's inbuilt HTML escape functionality to handle many of the cases. To do this simply create a element in the DOM tree and set the innerText of the element to your string. Then retrieve the innerHTML of the element. The browser will return an HTML encoded string.

function HtmlEncode(s)
{
  var el = document.createElement("div");
  el.innerText = el.textContent = s;
  s = el.innerHTML;
  return s;
}

Test run:

alert(HtmlEncode('&;\'><"'));

Output:

&amp;;'&gt;&lt;"

This method of escaping HTML is also used by the Prototype JS library though differently from the simplistic sample I have given.

Note: You will still need to escape quotes (double and single) yourself. You can use any of the methods outlined by others here.

10
  • 4
    note that delete el is a mistake here. perfectionkills.com/understanding-delete
    – gblazex
    Commented Oct 7, 2011 at 20:49
  • 1
    This doesn't do anything for me when I try it. I get the characters back unchanged.
    – Moss
    Commented Oct 12, 2011 at 17:17
  • 2
    Sorry, I was testing with odd characters, plus Chrome is sneaky and doesn't show you the real HTML output, but Firebug does (actually it showed an html entity for the copyright symbol when the generated source doesn't encode it). This does work fine on <>& but isn't as all encompassing as Neotropic's or KooiInc's solutions.
    – Moss
    Commented Oct 12, 2011 at 17:35
  • 24
    with jQuery, output = $('<div>').text(input).html()
    – dragon
    Commented Mar 17, 2012 at 22:54
  • 8
    Both methods does not convert ' into &apos; and " into &quot; So it still can be used for XSS attacks.
    – Somebody
    Commented Jul 2, 2012 at 10:15
91

You need a function that does something like

return mystring.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

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

3
  • 1
    what does the slash g do? Commented Jun 20, 2016 at 11:29
  • 7
    @JohnnyBizzle /g in a regular expression means "global". Simply put, all occurrences of the string will be replaced. Without /g only the first match would be replaced.
    – Kevin G.
    Commented Jul 21, 2016 at 11:42
  • A better answer is stackoverflow.com/a/4835406/7514010 Commented Apr 27, 2021 at 8:18
44

For those who want to decode an integer char code like &#xxx; inside a string, use this function:

function decodeHtmlCharCodes(str) { 
  return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
    return String.fromCharCode(charCode);
  });
}

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int&#8217;l reputation&#8217;!'));

ES6

const decodeHtmlCharCodes = str => 
  str.replace(/(&#(\d+);)/g, (match, capture, charCode) => 
    String.fromCharCode(charCode));

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int&#8217;l reputation&#8217;!'));

3
  • 4
    This should be the accepted answer as this will decode everything.
    – Quesofat
    Commented Jul 15, 2019 at 23:04
  • 1
    Note that this only decodes integer char codes. It won't decode something like &amp; or &gt;
    – Magmatic
    Commented May 30, 2022 at 19:05
  • 1
    @Magmatic the opening line of "For those who want to decode an integer char code like &#xxx; inside a string" is clear enough to indicate that these functions are for decoding integer encodings; if you want to decode named encodings, there are plenty of other functions here to do that. Commented May 31, 2022 at 8:07
37

[edit 2023] Support unicode surrogate pairs (use String.codePointAt).

This generic function encodes every nonalphabetic character to its HTML code (numeric character reference (NCR)):

const strEncoded =  HTMLEncode(`&Hellõ Wórld 😃`);
document.querySelector(`div`).innerHTML = strEncoded;
console.log(strEncoded);

function HTMLEncode(str) {
  str = [...str];
  //    ^ es20XX spread to Array: keeps surrogate pairs
  let i = str.length, aRet = [];

  while (i--) {
      var iC = str[i].codePointAt(0);
      if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
          aRet[i] = '&#'+iC+';';
      } else {
          aRet[i] = str[i];
      }
  }
  return aRet.join('');
}
<div></div>

Another approach is using Array.map.

const toHtmlEntities = (str, showInHtml = false) => 
  [...str].map( v => `${showInHtml ? `&amp;#` : `&#`}${
    v.codePointAt(0)};`).join(``);
const str = `&Hellõ Wórld 😃`;
//                        ^ surrogate pair

document.body.insertAdjacentHTML(`beforeend`, `<ul>
  <li>Show the entities (<code>toHtmlEntities(str, true)</code>): <b>${
    toHtmlEntities(str, true)}</b></li>
  <li>Let the browser decide (<code>toHtmlEntities(str)</code>): <b>${
    toHtmlEntities(str)}</b></li>
  <li id="textOnly"></li></ul>`);
document.querySelector(`#textOnly`).textContent = `As textContent: ${
  toHtmlEntities(str)}`;
body {
  font: 14px / 18px "normal verdana", arial;
  margin: 1rem;
}

code {
  background-color: #eee;
}

7
  • 1
    This sounds really clever but I can only get it to convert the basics: <>&
    – Moss
    Commented Oct 12, 2011 at 17:53
  • nvm. It runs in a console fine, but when you output to the browser it looks like it hasn't converted stuff. What is up with that?
    – Moss
    Commented Oct 12, 2011 at 17:57
  • @Moss: the browser renders the htmlencoded characters to the characters they represent. The advantage of html-encoded characters is that a browser doesn't have to guess about the translation of (e.g.) diacritical characters and thus always renders those characters like they should be rendered.
    – KooiInc
    Commented Oct 13, 2011 at 6:34
  • You might consider changing this to remove the array-like access off of str. IE7 and below don't support that, and you can just as easily call charCodeAt right off of str with i as the argument. var iC = str.charCodeAt(i)
    – Chase
    Commented Jan 30, 2012 at 7:54
  • This code is not producing the correct HTML Entity value for the ± character which should be &#177; but it is returning &#65533; which is an unknown character �.
    – Paul
    Commented Apr 25, 2014 at 17:03
27

Create a function that uses string replace

function convert(str)
{
  str = str.replace(/&/g, "&amp;");
  str = str.replace(/>/g, "&gt;");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/"/g, "&quot;");
  str = str.replace(/'/g, "&#039;");
  return str;
}
1
  • I was facing issue with only single quotes( ') & double quotes (") in my input value to display in html. Script was breaking if user add it. Commented Aug 2, 2016 at 5:24
23

From Mozilla ...

Note that charCodeAt will always return a value that is less than 65,536. This is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character. Because of this, in order to examine or reproduce the full character for individual characters of value 65,536 and above, for such characters, it is necessary to retrieve not only charCodeAt(i), but also charCodeAt(i+1) (as if examining/reproducing a string with two >letters).

The Best Solution

/**
 * (c) 2012 Steven Levithan <http://slevithan.com/>
 * MIT license
 */
if (!String.prototype.codePointAt) {
    String.prototype.codePointAt = function (pos) {
        pos = isNaN(pos) ? 0 : pos;
        var str = String(this),
            code = str.charCodeAt(pos),
            next = str.charCodeAt(pos + 1);
        // If a surrogate pair
        if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) {
            return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000;
        }
        return code;
    };
}

/**
 * Encodes special html characters
 * @param string
 * @return {*}
 */
function html_encode(string) {
    var ret_val = '';
    for (var i = 0; i < string.length; i++) { 
        if (string.codePointAt(i) > 127) {
            ret_val += '&#' + string.codePointAt(i) + ';';
        } else {
            ret_val += string.charAt(i);
        }
    }
    return ret_val;
}

Usage example:

html_encode("✈");
0
12

As was mentioned by dragon the cleanest way to do it is with jQuery:

function htmlEncode(s) {
    return $('<div>').text(s).html();
}

function htmlDecode(s) {
    return $('<div>').html(s).text();
}
2
  • Interesting, but if your string contains a space, this won't alter it. A better way is to use encodeURI(yourString); Commented Nov 28, 2014 at 10:07
  • A space is not a special character. encodeURI is for encoding URLs not HTML... it is the wrong tool for the job.
    – Serj Sagan
    Commented Nov 17, 2021 at 19:37
9
function char_convert() {

    var chars = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"]; 
    var codes = ["&copy;","&#219;","&reg;","&#158;","&#220;","&#159;","&#221;","&#36;","&#222;","&#37;","&#161;","&#223;","&#162;","&#224;","&#163;","&#225;","&Agrave;","&#164;","&#226;","&Aacute;","&#165;","&#227;","&Acirc;","&#166;","&#228;","&Atilde;","&#167;","&#229;","&Auml;","&#168;","&#230;","&Aring;","&#169;","&#231;","&AElig;","&#170;","&#232;","&Ccedil;","&#171;","&#233;","&Egrave;","&#172;","&#234;","&Eacute;","&#173;","&#235;","&Ecirc;","&#174;","&#236;","&Euml;","&#175;","&#237;","&Igrave;","&#176;","&#238;","&Iacute;","&#177;","&#239;","&Icirc;","&#178;","&#240;","&Iuml;","&#179;","&#241;","&ETH;","&#180;","&#242;","&Ntilde;","&#181;","&#243;","&Otilde;","&#182;","&#244;","&Ouml;","&#183;","&#245;","&Oslash;","&#184;","&#246;","&Ugrave;","&#185;","&#247;","&Uacute;","&#186;","&#248;","&Ucirc;","&#187;","&#249;","&Uuml;","&#64;","&#188;","&#250;","&Yacute;","&#189;","&#251;","&THORN;","&#128;","&#190;","&#252","&szlig;","&#191;","&#253;","&agrave;","&#130;","&#192;","&#254;","&aacute;","&#131;","&#193;","&#255;","&aring;","&#132;","&#194;","&aelig;","&#133;","&#195;","&ccedil;","&#134;","&#196;","&egrave;","&#135;","&#197;","&eacute;","&#136;","&#198;","&ecirc;","&#137;","&#199;","&euml;","&#138;","&#200;","&igrave;","&#139;","&#201;","&iacute;","&#140;","&#202;","&icirc;","&#203;","&iuml;","&#142;","&#204;","&eth;","&#205;","&ntilde;","&#206;","&ograve;","&#145;","&#207;","&oacute;","&#146;","&#208;","&ocirc;","&#147;","&#209;","&otilde;","&#148;","&#210;","&ouml;","&#149;","&#211;","&oslash;","&#150;","&#212;","&ugrave;","&#151;","&#213;","&uacute;","&#152;","&#214;","&ucirc;","&#153;","&#215;","&yacute;","&#154;","&#216;","&thorn;","&#155;","&#217;","&yuml;","&#156;","&#218;"];

    for(x=0; x<chars.length; x++){
        for (i=0; i<arguments.length; i++){
            arguments[i].value = arguments[i].value.replace(chars[x], codes[x]);
        }
    }
 }

char_convert(this);
5
  • 1
    This works great., But for some reason when mixed in with some JQuery Functionality, it misfires. Sometimes does into convert some, or only a couple. But in general, works great. onBlur="char_convert(this);"
    – Neotropic
    Commented Jan 3, 2011 at 16:34
  • Uh, I get an error "Uncaught TypeError: Cannot call method 'replace' of undefined" in Chrome and "arguments[i].value is undefined" in Firebug.
    – Moss
    Commented Oct 12, 2011 at 17:52
  • putting all of those special characters into an array like that is completely pointless. see other answers.
    – Gavin
    Commented Aug 15, 2013 at 20:41
  • Best solution for me, the only one that converts í to &iacute; for example.
    – Edhowler
    Commented May 8, 2018 at 17:55
  • How do you get those chars from your keyboard? I know this is a silly question butt...in OS X for example Commented Jun 22, 2020 at 21:59
6
function ConvChar(str) {
    c = {'&lt;':'&amp;lt;', '&gt;':'&amp;gt;', '&':'&amp;amp;',
         '"':'&amp;quot;', "'":'&amp;#039;', '#':'&amp;#035;' };

    return str.replace(/[&lt;&amp;>'"#]/g, function(s) { return c[s]; });
}

alert(ConvChar('&lt;-"-&-"->-&lt;-\'-#-\'->'));

Result:

&lt;-&quot;-&amp;-&quot;-&gt;-&lt;-&#039;-&#035;-&#039;-&gt;

In a testarea tag:

<-"-&-"->-<-'-#-'->

If you'll just change a few characters in long code...

6

If you need support for all standardized named character references, Unicode and ambiguous ampersands, the he library is the only 100% reliable solution I'm aware of!


Example use

he.encode('foo © bar ≠ baz 𝌆 qux');
// Output: 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// Output: 'foo © bar ≠ baz 𝌆 qux'
4

In a PRE tag - and in most other HTML tags - plain text for a batch file that uses the output redirection characters (< and >) will break the HTML, but here is my tip: anything goes in a TEXTAREA element - it will not break the HTML, mainly because we are inside a control instanced and handled by the OS, and therefore its content are not being parsed by the HTML engine.

As an example, say I want to highlight the syntax of my batch file using JavaScript. I simply paste the code in a textarea without worrying about the HTML reserved characters, and have the script process the innerHTML property of the textarea, which evaluates to the text with the HTML reserved characters replaced by their corresponding ISO 8859-1 entities.

Browsers will escape special characters automatically when you retrieve the innerHTML (and outerHTML) property of an element. Using a textarea (and who knows, maybe an input of type text) just saves you from doing the conversion (manually or through code).

I use this trick to test my syntax highlighter, and when I'm done authoring and testing, I simply hide the textarea from view.

3

A workaround:

var temp = $("div").text("<");
var afterEscape = temp.html(); // afterEscape == "&lt;"
3
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>html</title>

        <script>
            $(function() {
                document.getElementById('test').innerHTML = "&amp;";
            });
        </script>
    </head>

    <body>
        <div id="test"></div>
    </body>
</html>

You can simply convert special characters to HTML using the above code.

2

Here's a good library I've found very useful in this context.

https://github.com/mathiasbynens/he

According to its author:

It supports all standardized named character references as per HTML, handles ambiguous ampersands and other edge cases just like a browser would, has an extensive test suite, and — contrary to many other JavaScript solutions — he handles astral Unicode symbols just fine

1
2

Use:

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 169, 61558, 8226, 61607);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "&trade;", "&copy;", "&bull;", "&bull;", "&bull;");

var TextCheck = {
    doCWBind:function(div){
        $(div).bind({
            bind:function(){
                TextCheck.cleanWord(div);
            },
            focus:function(){
                TextCheck.cleanWord(div);
            },
            paste:function(){
                TextCheck.cleanWord(div);
            }
        });
    },
    cleanWord:function(div){
        var output = $(div).val();
        for (i = 0; i < swapCodes.length; i++) {
            var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g");
            output = output.replace(swapper, swapStrings[i]);
        }
        $(div).val(output);
    }
}

Another one that we use now that works. The one above I have it calling a script instead and returns the converted code. It is only good on small textareas (meaning not a full on article, blog, etc.)


For the above. It works on most characters.

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 61558, 8226, 61607, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 338, 339, 352, 353, 376, 402);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "&trade;", "&bull;", "&bull;", "&bull;", "&iexcl;", "&cent;", "&pound;", "&curren;", "&yen;", "&brvbar;", "&sect;", "&uml;", "&copy;", "&ordf;", "&laquo;", "&not;", "&shy;", "&reg;", "&macr;", "&deg;", "&plusmn;", "&sup2;", "&sup3;", "&acute;", "&micro;", "&para;", "&middot;", "&cedil;", "&sup1;", "&ordm;", "&raquo;", "&frac14;", "&frac12;", "&frac34;", "&iquest;", "&Agrave;", "&Aacute;", "&Acirc;", "&Atilde;", "&Auml;", "&Aring;", "&AElig;", "&Ccedil;", "&Egrave;", "&Eacute;", "&Ecirc;", "&Euml;", "&Igrave;", "&Iacute;", "&Icirc;", "&Iuml;", "&ETH;", "&Ntilde;", "&Ograve;", "&Oacute;", "&Ocirc;", "&Otilde;", "&Ouml;", "&times;", "&Oslash;", "&Ugrave;", "&Uacute;", "&Ucirc;", "&Uuml;", "&Yacute;", "&THORN;", "&szlig;", "&agrave;", "&aacute;", "&acirc;", "&atilde;", "&auml;", "&aring;", "&aelig;", "&ccedil;", "&egrave;", "&eacute;", "&ecirc;", "&euml;", "&igrave;", "&iacute;", "&icirc;", "&iuml;", "&eth;", "&ntilde;", "&ograve;", "&oacute;", "&ocirc;", "&otilde;", "&ouml;", "&divide;", "&oslash;", "&ugrave;", "&uacute;", "&ucirc;", "&uuml;", "&yacute;", "&thorn;", "&yuml;", "&#338;", "&#339;", "&#352;", "&#353;", "&#376;", "&#402;");

I create a javascript file that has a lot of functionality including the above. http://www.neotropicsolutions.com/JSChars.zip

All files needed are included. I added jQuery 1.4.4. Simply because I saw issues in other versions, yet to try them out.

Requires: jQuery & jQuery Impromptu from: http://trentrichardson.com/Impromptu/index.php

1. Word Count
2. Character Conversion
3. Checks to ensure this is not passed: "notsomeverylongstringmissingspaces"
4. Checks to make sure ALL IS NOT ALL UPPERCASE.
5. Strip HTML

    // Word Counter
    $.getScript('js/characters.js', function(){
        $('#adtxt').bind("keyup click blur focus change paste",
            function(event){
                TextCheck.wordCount(30, "#adtxt", "#adtxt_count", event);
        });
        $('#adtxt').blur(
            function(event){
                TextCheck.check_length('#adtxt'); // unsures properly spaces-not one long word
                TextCheck.doCWBind('#adtxt'); // char conversion
        });

        TextCheck.wordCount(30, "#adtxt", "#adtxt_count", false);
    });

    //HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" class="wordCount"></textarea>

    <div id="adtxt_count" class="clear"></div>

    // Just Character Conversions:
    TextCheck.doCWBind('#myfield');

    // Run through form fields in a form for case checking.
    // Alerts user when field is blur'd.
    var labels = new Array("Brief Description", "Website URL", "Contact Name", "Website", "Email", "Linkback URL");
    var checking = new Array("descr", "title", "fname", "website", "email", "linkback");
    TextCheck.check_it(checking, labels);

    // Extra security to check again, make sure form is not submitted
    var pass = TextCheck.validate(checking, labels);
    if(pass){
        // Do form actions
    }

    //Strip HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" onblur="TextCheck.stripHTML(this);"></textarea>
1
function escape (text)
{
  return text.replace(/[<>\&\"\']/g, function(c) {
    return '&#' + c.charCodeAt(0) + ';';
  });
}

alert(escape("<>&'\""));
1

This doesn't direcly answer your question, but if you are using innerHTML in order to write text within an element and you ran into encoding issues, just use textContent, i.e.:

var s = "Foo 'bar' baz <qux>";

var element = document.getElementById('foo');
element.textContent = s;

// <div id="foo">Foo 'bar' baz <qux></div>
1

Here are a couple methods I use without the need of jQuery:

You can encode every character in your string:

function encode(e){return e.replace(/[^]/g, function(e) {return "&#" + e.charCodeAt(0) + ";"})}

Or just target the main safe encoding characters to worry about (&, inebreaks, <, >, " and ') like:

function encode(r){
    return r.replace(/[\x26\x0A\<>'"]/g, function(r){return "&#" + r.charCodeAt(0) + ";"})
}

test.value = encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/
<textarea id=test rows="9" cols="55">www.WHAK.com</textarea>

0

We can use JavaScript's DOMParser for special characters conversion.

const parser = new DOMParser();
const convertedValue = (parser.parseFromString("&#039 &amp &#039 &lt &gt", "application/xml").body.innerText;
0

If you're using Lodash, you can do (copy pasted from documentation):

_.escape('fred, barney, & pebbles');
// => 'fred, barney, &amp; pebbles'

For more information: _.escape([string=''])

0

I had struggled with this myself for quite some time, but I settled on using this negative match regex to match all special characters and convert them to their relevant character codes:

var encoded = value.replace(/[^A-Za-z0-9]/g, function(i) {
    return '&#' + i.charCodeAt(0) + ';';
});
0

This is my proposal,

htmlFriendly = jsFriendly.replace( /[^\w\s]/gi, 
    function (char) { return `&#${char.charCodeAt(0)};`; }
);
-1

Yes, but if you need to insert the resulting string somewhere without it being converted back, you need to do:

str.replace(/'/g,"&amp;amp;#39;"); // and so on
2
  • "Yes" in response to some other answer? Commented Jan 31, 2022 at 17:05
  • I guess so - it was soooo long ago.
    – graham
    Commented Feb 1, 2022 at 19:11
-1
<html>
    <body>
        <script type="text/javascript">
            var str = "&\"'<>";
            alert('B4 Change: \n' + str);

            str = str.replace(/\&/g, '&amp;');
            str = str.replace(/</g,  '&lt;');
            str = str.replace(/>/g,  '&gt;');
            str = str.replace(/\"/g, '&quot;');
            str = str.replace(/\'/g, '&#039;');

            alert('After change: \n' + str);
        </script>
    </body>
</html>

Use this to test: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

1
  • The link is broken: "The file you asked for does not exist " Commented Jan 31, 2022 at 17:20
-1

The following is the a function to encode XML escaped characters in JavaScript:

Encoder.htmlEncode(unsafeText);
-1
function HTMLCharConvert(text: string) {
    var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 61558, 8226, 61607, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 338, 339, 352, 353, 376, 402);
    var swapStrings = new Array("--", "--", "'", "'", '"', '"', "*", "...", "&trade;", "&bull;", "&bull;", "&bull;", "&iexcl;", "&cent;", "&pound;", "&curren;", "&yen;", "&brvbar;", "&sect;", "&uml;", "&copy;", "&ordf;", "&laquo;", "&not;", "&shy;", "&reg;", "&macr;", "&deg;", "&plusmn;", "&sup2;", "&sup3;", "&acute;", "&micro;", "&para;", "&middot;", "&cedil;", "&sup1;", "&ordm;", "&raquo;", "&frac14;", "&frac12;", "&frac34;", "&iquest;", "&Agrave;", "&Aacute;", "&Acirc;", "&Atilde;", "&Auml;", "&Aring;", "&AElig;", "&Ccedil;", "&Egrave;", "&Eacute;", "&Ecirc;", "&Euml;", "&Igrave;", "&Iacute;", "&Icirc;", "&Iuml;", "&ETH;", "&Ntilde;", "&Ograve;", "&Oacute;", "&Ocirc;", "&Otilde;", "&Ouml;", "&times;", "&Oslash;", "&Ugrave;", "&Uacute;", "&Ucirc;", "&Uuml;", "&Yacute;", "&THORN;", "&szlig;", "&agrave;", "&aacute;", "&acirc;", "&atilde;", "&auml;", "&aring;", "&aelig;", "&ccedil;", "&egrave;", "&eacute;", "&ecirc;", "&euml;", "&igrave;", "&iacute;", "&icirc;", "&iuml;", "&eth;", "&ntilde;", "&ograve;", "&oacute;", "&ocirc;", "&otilde;", "&ouml;", "&divide;", "&oslash;", "&ugrave;", "&uacute;", "&ucirc;", "&uuml;", "&yacute;", "&thorn;", "&yuml;", "&#338;", "&#339;", "&#352;", "&#353;", "&#376;", "&#402;");

    for (let i = 0 ; i < swapCodes.length; i++) {
        const rep = '&#' + swapCodes[i] + ';'
        const idx = text.indexOf(rep)

        if (idx < 0)
            continue

        text = text.replaceAll(rep, swapStrings[i])
    }

    return text
}
1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jan 8 at 8:19
-4

Use the JavaScript function escape(), that lets you encode strings.

E.g.,

escape("yourString");
1
  • 1
    Encode for putting in a URL not for HTML (and the function is deprecated anyway since it is broken for Unicode).
    – Quentin
    Commented Jun 7, 2012 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.