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, "&amp;");
    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?

disabling input check by setting validationRequest = false - is not a good practice — Hacking around a security filter that rejects data you want to accept is worse practise. Set up your security filters to access the type of content you want to accept instead of accepting defaults designed to protect people who don't know what they are doing. — Quentin
– Quentin, Commented Sep 24, 2012 at 9:19
stackoverflow.com/questions/1219860/… (edit: @ammoQ - heh!) — vzwick
– vzwick, Commented Sep 24, 2012 at 9:21
@RoyiNamir — Good/Great programmers don't micro-optimise until code profiling says they need to. They write code designed to maximise maintainability. — Quentin
– Quentin, Commented Sep 24, 2012 at 9:37
@RoyiNamir — Not HTML encoding on the client in the first place will give the best performance on the client. — Quentin
– Quentin, Commented Sep 24, 2012 at 9:38

Sender · Accepted Answer · 2012-09-24 09:20:13Z

12

function htmlEncode(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .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();
}

answered Sep 24, 2012 at 9:20

Sender

6,90812 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Royi Namir Over a year ago

this wont handle multi space.

Royi Namir Over a year ago

This works for most scenarios, but this implementation of htmlDecode will eliminate any extra whitespace. So for some values of "input", input != htmlDecode(htmlEncode(input)). This was a problem for us in some scenarios. For example, if input = "\t Hi \n There ", a roundtrip encode/decode will yield " Hi There

Sender Over a year ago

i think get text and trim() function will help you. or my be ` .replace(/ /g, ' ')`

AndyMcKenna Over a year ago

I had to replace ' with ' for apostrophes to avoid the .net "potentially dangerous" error.

Community · Accepted Answer · 2017-05-23 10:30:40Z

-1

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.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Sep 24, 2012 at 9:19

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

2 Comments

Royi Namir Over a year ago

see my comment to Champ. same here

David Hellsing Over a year ago

Yes, it’s worth noting that this method returns the browser implementation of innerText, so \n becomes etc. If you need explicit control over each character, RegExp is probably better.

Luís Mestre · Accepted Answer · 2023-05-05 00:42:39Z

-1

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

edited May 5, 2023 at 0:42

Luís Mestre

1,9281 gold badge15 silver badges31 bronze badges

answered Sep 24, 2012 at 9:23

GajendraSinghParihar

9,16911 gold badges40 silver badges67 bronze badges

1 Comment

Royi Namir Over a year ago

This works for most scenarios, but this implementation of htmlDecode will eliminate any extra whitespace. So for some values of "input", input != htmlDecode(htmlEncode(input)). This was a problem for us in some scenarios. For example, if input = "\t Hi \n There ", a roundtrip encode/decode will yield " Hi There

Collectives™ on Stack Overflow

Fastest way to replace string in js?

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related