CODEWITHSUNDEEP
javascriptjquery
LocustHorde
LocustHorde

Reputation: 6399

How to escape quotes in while creating a textbox in jquery / javascript?

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.

Upvotes: 5

Views: 4953

Answers (5)

Esailija
Esailija

Reputation: 140228

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

Fiddle

Upvotes: 3

Jeetendra Chauhan
Jeetendra Chauhan

Reputation: 1977

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

Upvotes: 0

David Brainer
David Brainer

Reputation: 6331

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.

Upvotes: 3

R Hill
R Hill

Reputation: 1804

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("'", "&#39;");

has the desired effect.

Upvotes: 1

Brad Christie
Brad Christie

Reputation: 101614

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.

Upvotes: 9

Related Questions