I'm trying to write a function that checks a parameter against an array of special HTML entities (like the user entered '&' 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>&</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 '&' 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>&</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
Share
Improve this question
edited Jan 9, 2013 at 4:31
Sergiu Dumitriu
11.6k33 gold badges4242 silver badges6363 bronze badges
asked Dec 7, 2012 at 12:34
streetlightstreetlight5,9681313 gold badges6666 silver badges102102 bronze badges13
Could you provide simple test cases? like which string should match and which shouldn't.
– Shiplu Mokaddim
CommentedDec 7, 2012 at 12:40
Just added. Thank you for the tip!
– streetlight
CommentedDec 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
CommentedDec 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
CommentedDec 7, 2012 at 12:55
1If 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
CommentedDec 7, 2012 at 14:13
|
Show 8 more ments
3 Answers
3
Reset to default
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:
It matches the "word" entities as well as numeric entities. For example:
'test & & <'.replace(/&(?:[a-z]+|#x?\d+);/gi, '<span>$&</span>');
Output:
test & <span>&</span> <span><</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.