Generating a string literal from text in JavaScript

Question

<html>
<script>
function printStringLiteral(theInput) {
    document.body.innerHTML += JSON.stringify(theInput.value)
}
</script>
<body>
<p>Text to modify:<p>
<input type="text" id = "textInput">

<a onclick="printStringLiteral(document.getElementById('textInput'));" href="javascript:void(0);">Get string literal</a>
</body>
</html>

I'm trying to create a simple web page that accepts text as input and returns a string literal, but this web page doesn't display the string literal correctly after it has been generated. I entered <p>"Hi!"</p> as input, but "\"Hi!\" was displayed as output, instead of the correctly formatted string literal. What will I need to do here in order to get the string to display properly?

What is the result you're expecting? You've converted your string to JSON, hence the escaped quotes, then added it to the document's innerHTML, which will interpret the <p> tags rather than displaying them. I think the browser is doing correctly what you've asked, but not what you expect — user1864610
– user1864610, Commented Aug 1, 2013 at 21:01
Don't JSON.stringify anything that isn't an array or object. The result is just a JSON string (I'm not sure if that result is guaranteed; that's just what V8 seems to return), but not a valid JSON text, so it can be ignored by JSON parsers. — Paul
– Paul, Commented Aug 1, 2013 at 21:03
@Paulpro A string literal is valid JSON. Any implementation abiding to the JavaScript language specification MUST return a valid JSON string as defined in the JSON Spec (At least if it's a valid EcmaScript 5 run time). (It's all in json.org by the way :)). — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Aug 1, 2013 at 21:18
@BenjaminGruenbaum It's a valid JSON string, but not a valid JSON text. I'm not sure about the ECMAScript specification, but to conform to Douglas Crockford's RFC a JSON text much start with [ or {. That's not made very clear on json.org . — Paul
– Paul, Commented Aug 1, 2013 at 21:34

Benjamin Gruenbaum · Accepted Answer · 2013-08-01 20:57:54Z

3

Instead of setting the innerHTML, set the text

function printStringLiteral(theInput) {
    document.body.textContent += JSON.stringify(theInput.value)
}

If you need to support IE8- you need to set innerText too

answered Aug 1, 2013 at 20:57

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

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

Collectives™ on Stack Overflow

Generating a string literal from text in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related