Handling a input with HTML inside its value (using jQuery)

Question

I created a small function similar to a edit-in-place plugin.

What it does:

creates the text input field (or gets it if it exists):

var input = ($('input', this).length > 0) ? $('input', this) : $('<input type="text" value="' + editable + '" />'),

This works but only if the editable text doesn't contain non-encoded HTML characters.

If it has HTML characters like < >, they get converted in the 2nd step to HTML code, and mess up the input element...

I tried to escape them by using:

editable = $('<div/>').text($(this).html()).html()

but then I get a text input with escaped HTML lol :)

What can I do?

The character that really matters is '"' since it closes your value="" attribute. You need to be very careful about XSS injection however. — JJ.
– JJ., Commented Aug 23, 2011 at 12:36
yes " seems to be the issue, because all text after that doesn;t show.. — Alex
– Alex, Commented Aug 23, 2011 at 12:38
Do you want your input textbox to just display the content including all the HTML tags? Or do you want to remove the HTML tags and display just the text? — arunkumar
– arunkumar, Commented Aug 23, 2011 at 12:40

Pointy · Accepted Answer · 2011-08-23 12:36:38Z

2

You can HTML-escape a string so that it can be included in an HTML attribute value like this:

var escaped = string.replace(/</g, '&lt;').replace(/'/g, '&#39;').replace(/"/g, '&#34;');

answered Aug 23, 2011 at 12:36

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

1 Comment

that worked thanks. I have now problems in a different place, but I think I can fix them :)