I'm trying to write a function that checks a parameter against an array of special HTML entities (like the user entered '&amp' instead of '&'), and then add a span around those entered entities.

How would I search through the string parameter to find this? Would it be a regex?

This is my code thus far:

 function ampersandKiller(input) {
 var specialCharacters = ['&', ' ']
 if($(specialCharacters).contains('&')) {
     alert('hey')
 } else {
     alert('nay')
 }
}

Obviously this doesn't work. Does anyone have any ideas?

So if a string like My name is & was passed, it would render My name is <span>&amp;</span>. If a special character was listed twice -- like 'I really like &&& it would just render the span around each element. The user must also be able to use the plain &.

I'm trying to write a function that checks a parameter against an array of special HTML entities (like the user entered '&amp' instead of '&'), and then add a span around those entered entities.

How would I search through the string parameter to find this? Would it be a regex?

This is my code thus far:

 function ampersandKiller(input) {
 var specialCharacters = ['&', ' ']
 if($(specialCharacters).contains('&')) {
     alert('hey')
 } else {
     alert('nay')
 }
}

Obviously this doesn't work. Does anyone have any ideas?

So if a string like My name is & was passed, it would render My name is <span>&amp;</span>. If a special character was listed twice -- like 'I really like &&& it would just render the span around each element. The user must also be able to use the plain &.

• javascript
• jquery
• html-entities

• Could you provide simple test cases? like which string should match and which shouldn't. – Shiplu Mokaddim Commented Dec 7, 2012 at 12:40
• Just added. Thank you for the tip! – streetlight Commented Dec 7, 2012 at 12:43
• What are you actually trying to do? It seems to me that you are trying to solve a problem that you should not even have in the first place. Can you explain that problem? – Tomalak Commented Dec 7, 2012 at 12:53
• I'm working on an application based on user input. I'm trying to allow the user to pass special characters and HTML entities -- but to stop the entity from rendering, I'm looking to wrap it in an <xmp> tag before it es back from the server. Maybe this isn't the best method of attack? – streetlight Commented Dec 7, 2012 at 12:55
• 1 If you do it on the server side, there is an HTML encode function in every programming language. If you're trying to do it on the client side, assigning a string to the text value of an element instead of using innerHTML would be correct. It depends on what you do. – Tomalak Commented Dec 7, 2012 at 14:13

3 Answers 3

function htmlEntityChecker(input) {
    var characterArray = ['&', ' '];
    $.each(characterArray, function(idx, ent) {
        if (input.indexOf(ent) != -1) {
            var re = new RegExp(ent, "g");
            input = input.replace(re, '<span>' + ent + '</span>');
        }
    });

    return input;
}

FIDDLE

You could use this regular expression to find and wrap the entities:

input.replace(/&amp;|&nbsp;/g, '<span>$&</span>')

For any kind of entity, you could use this too:

input.replace(/&(?:[a-z]+|#\d+);/g, '<span>$&</span>');

It matches the "word" entities as well as numeric entities. For example:

'test & &amp; &#60;'.replace(/&(?:[a-z]+|#x?\d+);/gi, '<span>$&</span>');

Output:

test & <span>&amp;</span> <span>&#60;</span>

Another option would be to make the browser do a decode for you and check if the length is any different... check this question to see how to unescape the entities. You can then pare the length of the original string with the length of the decoded. Example below:

function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
function hasEntities(input) {
    if (input.length != htmlDecode(input).length) {
       return true;
    }
    return false;
}
alert(hasEntities('a'))
alert(hasEntities('&'))

The above will show two alerts. First false and then true.