I have a couple of span elements and I need to get the contents of these span elements into a textbox so the user can edit.

There might be any number of span elements, so the textboxes have to be created at runtime. The problem I'm having is that when the text contains a single quotes, it's messing with my text box values since it closes one of the quotes..

This is how I am creating my textbox:

var spanContent = $(value).text();
var tmpTextBox = "<input type='text' id='t" + index + "' value='" + spanContent  + "' class='dynTxt' />";

Notice the value='" + spanContent + "' part, this is where it's breaking if spanContent has a single quote in it.. Now, I know I can do this:

value = \"" + spanContent + "\"

which works fine.. but, when the spanContent has double quotes, it breaks again..

What is the safest way to escape both single quotes and double quotes in this situation, please? I cannot html encode them because textbox values doesn't support them..

I have created a small reproduction of this on jsfiddle here for you to play with..

Thanks.

I have a couple of span elements and I need to get the contents of these span elements into a textbox so the user can edit.

There might be any number of span elements, so the textboxes have to be created at runtime. The problem I'm having is that when the text contains a single quotes, it's messing with my text box values since it closes one of the quotes..

This is how I am creating my textbox:

var spanContent = $(value).text();
var tmpTextBox = "<input type='text' id='t" + index + "' value='" + spanContent  + "' class='dynTxt' />";

Notice the value='" + spanContent + "' part, this is where it's breaking if spanContent has a single quote in it.. Now, I know I can do this:

value = \"" + spanContent + "\"

which works fine.. but, when the spanContent has double quotes, it breaks again..

What is the safest way to escape both single quotes and double quotes in this situation, please? I cannot html encode them because textbox values doesn't support them..

I have created a small reproduction of this on jsfiddle here for you to play with..

Thanks.

• javascript
• jquery

5 Answers 5

For starters, if you're using jQuery take advantage of how modular it can be when creating elements. Not only is writing out the HTML elements bad from a security perspective, it's also prone to errors (as you've established). However, you'll be happy to know there is always a better way:

var input = $('<input />',{
  'type': 'text',
  'id': 't'+index,
  'value': spanContent,
  'class': 'dynTxt'
});

Now you have a new <input> element that can be attached, manipulated, etc. You can also do it the "long" way:

var input = $('<input />')
  .attr({'type':'text','id':'t'+index})
  .val(spanContent)
  .addClass('dynTxt');

Which results in the same element being generated:

<input type="text" id="t_index_" value="_spanContent_" class="dynTxt" />

The best part is that any problems (like quotes) will be solved for you, leaving you to just write the content you need.

Instead of trying to concatenate the strings, how about setting the value after creating the element?

var spanContent = $(value).text();
var tmpTextBox = "<input type='text' id='t" + index + "' class='dynTxt' />";
$('#container').append($(tmpTextBox).val(spanContent));

Here is your updated jsFiddle showing this in action: Fiddle

Looks like we all said pretty much the same thing. As mentioned in the other answers you can apply this same general idea to all of the attributes, not just value.

var tmpTextBox = $("<input>", {
    type: "text",
    id: "t" + index,
    val: spanContent,
    'class': "dynTxt"
});

Fiddle

A somewhat heavy-handed option, if the text is only ever going to be used as marked-up text in a browser, is to replace all the single-quotes with its HTML ascii representation. In this case:

var spanContent = $(value).text().replace("'", "'");

has the desired effect.

var tf = document.createElement("input");
tf.setAttribute("type","input");
tf.setAttribute("name","_tf");
var txt = "Hello. This using slash \\ quote \"";
tf.setAttribute("value",txt);
document.childNodes[1].appendChild(tf);

This is simply in pure javascript working live jsbin