How to programmatically escape quotes?

Question

this should be simple but I can't figure it out.

I want to let user edit a value. To do so, upon click, the value changes into a textbox. However, if the user puts a quote mark in the user input within the text box the value="" attribute of the text box closes prematurely and the quote mark and anything after it gets lost. Escape (deprecated) and encodeURI merely replace the quote mark with asci does which don't look good in the textbox.

Would appreciate anyone's solution to this problem:

Here is javascript:

function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="'+text+'"><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext
return false;
}

html:

Text: <span id="text" onclick="editText()";>He said "that's cool"</span>

jsfiddle

http://jsfiddle.net/2s9v2/6/

UPDATE:

Contrary to what those who marked this as a duplicate say, the duplicate question does not provide an answer to my question. They might want to re-read my question and the so-called duplicate and mentally register the word "programmatic" in my question and actually look at the code in the duplicate relaive to the code here.... Just saying.

I ended up changing the textbox to a textarea as a workaround as there does not seem to be a straightfoward way to programmatically escape a quote within a textbox.

The answer from Merlin below is a possible approach but calling the second function is more complex than just replacing textbox with textarea. In any case, I could not get that to work but I thank Merlin for his answer and upvoted it.

You can use string replacement to add ` \ ` to every `"` but constructing HTML out of user input **directly** is generally a bad idea, for security reasons. — merlin2011, May 13 '14 at 00:36
@Bergi tried .textContent and same problem. .value is undefined. What would you suggest? — user1904273, May 13 '14 at 00:55

merlin2011 · Answer 1 · 2014-05-13T00:36:07.617

Why not just set the value directly instead of rebuilding the input?

document.getElementById('name').value = edittext

Of course, this assumes that the input element with id=name already exists in your DOM, but I see no particular reason you could not ensure that it is already there (either writing directly in HTML or generating in Javascript on page load).

Update: It seems that the OP wants the element to be dynamically created in the onClick, by turning the text that is currently in a div into an input field with the contents of that div as its value.

I believe the following might do the trick, assuming id is unique as it should be.

function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext;
document.getElementById('name').value = text;
document.getElementById('text').onclick = function() {}; //
return false;
}

Note that you will need to disable the onClick inside the above function as well, and then re-enable it inside storeText, because otherwise every click will cause extra buttons to be added.

Update 2: Here is a fully working example without parameter passing (for simplicity).

<html>
<body>
<script>
function editText() {
    var text = document.getElementById('text').innerHTML;
    var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText();">';
    document.getElementById('text').innerHTML = edittext;
    document.getElementById('name').value = text;
    document.getElementById('text').onclick = function() {}; 
    return false;
}
function storeText() {
    document.getElementById('text').innerHTML = document.getElementById('name').value;
    document.getElementById('text').onclick = "editText();";
}
</script>
<div id="text" onclick="editText();">HelloWorld</div>
</body>
</html>

First, the user clicks on the value to expose the input box for editing. The error occurs when the value that displays in the edit box is not the same as the value. Where would you add this line? — user1904273, May 13 '14 at 00:12
@user1904273, You will need to give a more complete example to demonstrate the problem. It sounds like you are creating the `input` element on the fly and replacing some other element. If that is the case, then you can still create the element first and then use the solution I present. — merlin2011, May 13 '14 at 00:16
@user1904273, I think I understand, and I updated the answer. Let me know if that is what you intended. — merlin2011, May 13 '14 at 00:19
I guess there is no way to escape the quote mark somehow. You are right that this is abbreviated code. This function does multiple duty for a whole page where fields can be edited upon clicking (in the full blown version it takes the name of the field as an input). So I am trying to keep it as simple as possible.... Added jsfiddle to illustrate problem in simplest form. — user1904273, May 13 '14 at 00:32
@user1904273, You can use string replacement to add ` \ ` to every `"` but constructing HTML out of user input is generally a bad idea. — merlin2011, May 13 '14 at 00:34
Sorry, appreciate your answer. I don't understand syntax of .onclick =function() when there is no function name. — user1904273, May 13 '14 at 00:59
@user1904273 That just defines an anonymous function with no body. — merlin2011, May 13 '14 at 01:07

score 2 · Answer 2 · answered May 13 '14 at 00:09

2

Try: text.replace(/"/g,""")

Ideally, though, you should be creating the elements with createElement, at which point you can do elem.value = text with no need for escaping.

answered May 13 '14 at 00:09

Niet the Dark Absol

320,036
81
464
592

I think this will show " in the input box... – user1904273 May 13 '14 at 00:13
@user1904273 It works for me. [Demo](http://jsfiddle.net/j54tT/) – Oriol May 13 '14 at 00:35

How to programmatically escape quotes?

2 Answers2