PHP’s htmlspecialchars Implemented in JavaScript

htmlspecialchars is an extremely useful PHP function. Its use is defined by the PHP manual as such:

Certain characters have special significance in HTML, and should be represented by HTML entities if they are to preserve their meanings. This function returns a string with some of these conversions made; the translations made are those most useful for everyday web programming…

This function is useful in preventing user-supplied text from containing HTML markup, such as in a message board or guest book application.

The translations performed are:

‘&’ (ampersand) becomes ‘&’

‘“’ (double quote) becomes ‘"’…

‘<’ (less than) becomes ‘&lt;’

‘>’ (greater than) becomes ‘&gt;’

This function proves useful in languages other than just PHP. It is necessary to use these HTML entities whenever you want HTML to display as plain text instead of being parsed, in whatever language you may be using to output it.

A realistic JavaScript example would be outputting user input to the screen. If you were to have a command prompt that allowed users to input and display a history of commands, their entry of would display as command instead of as what they entered. It is precisely situations like this that was invented.

Unfortunately, this function does not exist by default in all languages. For this reason, I have ported a similar copy in JavaScript. It takes a string, such as , and converts its HTML entities, resulting in . This allows it to be output safely.

I will also include for converting a string of HTML entities back to its original HTML markup.

Code

a JavaScript implementation of htmlspecialchars
a JavaScript implementation of htmlspecialchars_decode

A Reversed Array

Those of you with a keen eye may have noticed that the array for decoding is reverse of the one for encoding. This is both deliberate and necessary.

The ampersand () must be translated before the other three due to the fact that the other HTML entities include ampersands! If the other entities were to translate first, their ampersands would translate too.

ampersand order matters

This same logic applies to decoding HTML entities. If ampersands are the first to translate going forward, they must be the last to translate in reverse. Otherwise, you risk double-decoding an HTML entity, resulting in the wrong string.

Conclusion

This code, being so short, is free for you to use and distribute. You are welcome to leave feedback in the comments or reach out to me on Twitter or through any of the contact options available at CharlesStover.com.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store