Hướng dẫn html escape

I want to display text to HTML by a JavaScript function. How can I escape HTML special characters in JavaScript? Is there an API?

Hướng dẫn html escape

asked Jun 4, 2011 at 4:50

3

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, "'");
 }

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("'", ''');
}

dthree

18.8k14 gold badges70 silver badges103 bronze badges

answered Jun 4, 2011 at 5:00

bjorndbjornd

21.8k4 gold badges54 silver badges71 bronze badges

13

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

vsync

107k53 gold badges285 silver badges370 bronze badges

answered Aug 20, 2014 at 2:50

spiderlamaspiderlama

1,44314 silver badges10 bronze badges

2

You can use jQuery's .text() function.

For example:

http://jsfiddle.net/9H6Ch/

From the jQuery documentation regarding the .text() function:

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), does not interpret the string as HTML.

Previous Versions of the jQuery Documentation worded it this way (emphasis added):

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), which replaces special characters with their HTML entity equivalents (such as < for <).

fgb

18.3k2 gold badges37 silver badges52 bronze badges

answered Jun 4, 2011 at 5:01

jeremysawesomejeremysawesome

6,8355 gold badges33 silver badges37 bronze badges

2

Using Lodash:

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

Source code

answered Oct 30, 2016 at 19:41

cs01cs01

4,8691 gold badge27 silver badges28 bronze badges

3

I think I found the proper way to do it...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

answered Aug 7, 2013 at 16:16

lvellalvella

11.9k11 gold badges49 silver badges97 bronze badges

4

This is, by far, the fastest way I have seen it done. Plus, it does it all without adding, removing, or changing elements on the page.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

answered Jan 2, 2018 at 0:11

arjunpatarjunpat

5794 silver badges10 bronze badges

4

It was interesting to find a better solution:

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&';
      case '<':
        return '<';
      case '"':
        return '"';
      default:
        return ''';
    }
  });
};

I do not parse > because it does not break XML/HTML code in the result.

Here are the benchmarks: http://jsperf.com/regexpairs Also, I created a universal escape function: http://jsperf.com/regexpairs2

76484

6,0403 gold badges16 silver badges27 bronze badges

answered Feb 11, 2015 at 15:41

iegikiegik

1,3611 gold badge16 silver badges29 bronze badges

4

The most concise and performant way to display unencoded text is to use textContent property.

Faster than using innerHTML. And that's without taking into account escaping overhead.

document.body.textContent = 'a  c ';

answered Nov 29, 2017 at 2:57

useruser

20.8k9 gold badges109 silver badges98 bronze badges

1

DOM Elements support converting text to HTML by assigning to innerText. innerText is not a function but assigning to it works as if the text were escaped.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

answered Aug 21, 2017 at 10:27

teknopaulteknopaul

6,2172 gold badges28 silver badges22 bronze badges

2

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 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 &ersand (it has to be first),
* \x0A is newline,
*************/

answered Jul 26, 2015 at 13:54

Dave BrownDave Brown

8879 silver badges6 bronze badges

1

By the books

OWASP recommends that "[e]xcept for alphanumeric characters, [you should] escape all characters with ASCII values less than 256 with the &#xHH; format (or a named entity if available) to prevent switching out of [an] attribute."

So here's a function that does that, with a usage example:

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).slice(-4) + ';'
  )
}

document.querySelector('div').innerHTML =
  '' +
  escapeHTML('';
const safeString = escapeHtml(unsafeString);

answered Mar 11, 2020 at 15:13

Shimon SShimon S

3,7782 gold badges26 silver badges33 bronze badges

I came across this issue when building a DOM structure. This question helped me solve it. I wanted to use a double chevron as a path separator, but appending a new text node directly resulted in the escaped character code showing, rather than the character itself:

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* This resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* This was key */

answered Jul 30, 2019 at 8:36

SilasSilas

111 bronze badge

Just write the code in between

....
. Make sure you add the class name in the code tag. It will escape all the HTML snippet written in
....
.

const escape = {
    '"': '"',
    '&': '&',
    '<': '<',
    '>': '>',
}
const codeWrappers = document.querySelectorAll('.html-escape')
if (codeWrappers.length > 0) {
    codeWrappers.forEach(code => {
        const htmlCode = code.innerHTML
        const escapeString = htmlCode.replace(/"|&|<|>/g, function (matched) {
            return escape[matched];
        });
        code.innerHTML = escapeString
    })
}
    
        

Card Title

Srcondary text

Greyhound divisively hello coldly wonderfully marginally far upon excluding.

answered Apr 14, 2021 at 8:41

Use this to remove HTML tags from a string in JavaScript:

const strippedString = htmlString.replace(/(<([^>]+)>)/gi, "");

console.log(strippedString);

answered Sep 10, 2020 at 14:40

1

Try this, using the prototype.js library:

string.escapeHTML();

Try a demo

JD.

2,9852 gold badges25 silver badges37 bronze badges

answered Apr 16, 2014 at 20:48

LuckyLucky

7152 gold badges10 silver badges27 bronze badges

1

I came up with this solution.

Let's assume that we want to add some HTML to the element with unsafe data from the user or database.

var unsafe = 'some unsafe data like  here';

var html = '';
html += '
'; html += '

' + unsafe + '

'; html += '
'; element.html(html);

It's unsafe against XSS attacks. Now add this: $(document.createElement('div')).html(unsafe).text();

So it is

var unsafe = 'some unsafe data like  here';

var html = '';
html += '
'; html += '

' + $(document.createElement('div')).html(unsafe).text(); + '

'; html += '
'; element.html(html);

To me this is much easier than using .replace() and it'll remove!!! all possible HTML tags (I hope).

answered Mar 30, 2016 at 9:53

KostiantynKostiantyn

1,5561 gold badge14 silver badges20 bronze badges

2