Question

For the sake of simplicity & learning something new, please don’t suggest using two separate replace functions. I know that’s an option but I would rather also know how to do this (or if it’s not possible).

'<test></test>'.replace(/<|>/g,'$&'.charCodeAt(0))

This is what I’ve got so far. This sample code is, as you can tell, for another piece of code to escape HTML entities while still using innerHTML (because I do intend to include a few HTML entities such as small images, so again please don’t suggest textContent).

Since I’m trying to replace both < and >, the problem is converting each individual one to their respective character codes. Since regular expressions allow for this “OR” condition as well as backreferences to each one, I’m hoping there’s a way to get the reference of each individual character as they’re replaced. $& will return <><> (because they’re replaced in that order), but I don’t know how to get them as they’re replaced and take their character codes for the HTML entities. The problem is, I don’t know what to use in this case if anything.

If that explanation wasn’t clear enough, I want it to be something like this (and this is obviously not going to work, it’ll best convey what I mean):

Assuming x is the index of the character being replaced,

'<test></test>'.replace(/<|>/g,'$&'.charCodeAt(x))

Hopefully that makes more sense. So, is this actually possible in some way?

Answer 1

'<test></test>'.replace(/[<>]/g,function(a) {return '&#'+a.charCodeAt(0)+';';});

I’ve put the characters in a square-bracket-thing (don’t know it’s proper name). That way you can add whatever characters you want.

The above will return:

<test></test>