Fastest way to replace string in js?

Question

When I submit/POST data to the server, I need to HTMLencode its characters (the relevant ones), since disabling input check by setting validationRequest = false is not a good practice.

All solutions are finally replacing chars in string:

This is what i've written.

function htmlEncode(str) {
    str = str.replace(/\&/g, "&");
    str = str.replace(/\</g, "&lt;");
    str = str.replace(/\>/g, "&gt;");
    str = str.replace(/ /g, "&nbsp;");
    return str;
}

But apprently regex could be replaced with something much faster (don't get me wrong - I love regex).

Also, working with indexes + sub-strings seems wasteful.

What is the fastest way of doing it?

Answer 1

function htmlEncode(str) {
    return String(str)
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

jsperf tests show this method is fast and possibly the fastest option if you're in a recent browser version

anothre way to also like this

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

function htmlDecode(value){
  return $('<div/>').html(value).text();
}

Answer 2

If you are just encoding HTML entities, you can try:

function htmlEncode(str) {
    var d = document.createElement('b');
    d.innerText = str;
    return d.innerHTML;
}

This way is not the fastest. This test indicates that regExp is faster: http://jsperf.com/encodehtml

However, the difference seems to be smaller the more HTML you consume.

The innerText method seems more reliable as it will exploit the native browser conversion tables for entities. With RegExp, there is always a chance that you missed something and as some previous answers indicate, consuming HTML using RegExp is not always optimal.

Answer 3

function htmlEncode(value){
    if (value) {
        return jQuery('<div />').text(value).html();
    }
    return '';
}
 
function htmlDecode(value) {
    if (value) {
        return $('<div />').html(value).text();
    }
    return '';
}