The fastest way to avoid HTML tags as HTML objects?

Question

I am writing a Chrome extension that includes performing a lot of the following task: disinfection of strings that may contain HTML tags by converting < , > and & to < , > and & respectively.

(In other words, just like PHP htmlspecialchars(str, ENT_NOQUOTES) - I don't think there is a real need to convert double quote characters.)

This is the fastest function I've found so far:

 function safe_tags(str) { return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') ; } 

But there is still a lot of backwardness when I need to run several thousand lines at a time.

Can anyone improve this? This is mainly for strings of 10 to 150 characters, if that matters.

(One of my ideas was not to worry about coding the sign more than the sign - was there any real danger?)

Answer 1

You can try passing a callback function to perform a replacement:

 var tagsToReplace = { '&': '&amp;', '<': '&lt;', '>': '&gt;' }; function replaceTag(tag) { return tagsToReplace[tag] || tag; } function safe_tags_replace(str) { return str.replace(/[&<>]/g, replaceTag); } 

Here is a performance test: http://jsperf.com/encode-html-entities for comparison with calling the replace function repeatedly and using the DOM method suggested by Dmitry.

Your path seems to be faster ...

Why do you need this?

Answer 2

Here you can do it like this:

 var escape = document.createElement('textarea'); function escapeHTML(html) { escape.textContent = html; return escape.innerHTML; } function unescapeHTML(html) { escape.innerHTML = html; return escape.textContent; } 

Here is a demo.

Answer 3

Martijn method as a prototype function:

 String.prototype.escape = function() { var tagsToReplace = { '&': '&amp;', '<': '&lt;', '>': '&gt;' }; return this.replace(/[&<>]/g, function(tag) { return tagsToReplace[tag] || tag; }); }; var a = "<abc>"; var b = a.escape(); // "&lt;abc&gt;" 

Answer 4

The fastest way:

 function escapeHTML(html) { return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML; } 

This method is about twice as fast as the replacement methods, see http://jsperf.com/htmlencoderegex/35 .

Source: stack overflow

Answer 5

All-in-one script:

 // HTML entities Encode/Decode function htmlspecialchars(str) { var map = { "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" // ' -> &apos; for XML only }; return str.replace(/[&<>"']/g, function(m) { return map[m]; }); } function htmlspecialchars_decode(str) { var map = { "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": "\"", "&#39;": "'" }; return str.replace(/(&amp;|&lt;|&gt;|&quot;|&#39;)/g, function(m) { return map[m]; }); } function htmlentities(str) { var textarea = document.createElement("textarea"); textarea.innerHTML = str; return textarea.innerHTML; } function htmlentities_decode(str) { var textarea = document.createElement("textarea"); textarea.innerHTML = str; return textarea.value; } 

http://pastebin.com/JGCVs0Ts

Answer 6

The source code for AngularJS also has a version of angular -sanitize.js .

 var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g, // Match everything outside of normal chars and " (quote character) NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g; /** * Escapes all potentially dangerous characters, so that the * resulting string can be safely inserted into attribute or * element text. * @param value * @returns {string} escaped text */ function encodeEntities(value) { return value. replace(/&/g, '&amp;'). replace(SURROGATE_PAIR_REGEXP, function(value) { var hi = value.charCodeAt(0); var low = value.charCodeAt(1); return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';'; }). replace(NON_ALPHANUMERIC_REGEXP, function(value) { return '&#' + value.charCodeAt(0) + ';'; }). replace(/</g, '&lt;'). replace(/>/g, '&gt;'); } 

Answer 7

Even faster / shorter solution:

 escaped = new Option(html).innerHTML 

This is due to some strange JavaScript remnant when the Option element saves a constructor that automatically performs this kind of escaping.

Credit for https://github.com/jasonmoo/t.js/blob/master/t.js

Answer 8

 function encode(r) { return r.replace(/[\x26\x0A\x3c\x3e\x22\x27]/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, \x22 is ", \x27 is ', \x3c is <, \x3e is > */ 

 <textarea id=test rows=11 cols=55>www.WHAK.com</textarea> 

Answer 9

Martijn method as a single function with label processing " (using in javascript):

 function escapeHTML(html) { var fn=function(tag) { var charsToReplace = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&#34;' }; return charsToReplace[tag] || tag; } return html.replace(/[&<>"]/g, fn); } 

Answer 10

I'm not quite sure about the speed, but if you are looking for simplicity, I would suggest using the escape lodash / underscore function.

Answer 11

A bit late for the show, but what's wrong with encodeURIComponent () and decodeURIComponent () ?