Escaping HTML in JavaScript

Question

When I'm building HTML in JavaScript I'm constantly escaping double quotes. E.g.

$(wrapper).append("<input type=\"text\" name=\"thingummy[" + id + "]\" data-id=\"" + data_id + "\" id=\"" + id + "_" + data_id + "\" /> <br>");

and, when there are many quotation marks, I'm constantly making mistakes over which quotes I've escaped. And I end up spending more time than I'd like fixing them.

Is there a better (quicker / safer / more legible) way of building HTML than the approach I'm using?

UPDATE

One rather important point I forgot to mention! I'm outputting this JavaScript using PHP. So, I have code like this:

echo '$(wrapper).append("<input type=\"text\" name=\"thingummy[" + id + "]\" data-id=\"" + data_id + "\" id=\"" + id + "_" + data_id + "\" /> <br>");';

which makes using single quotation marks a problem ('cos they end up breaking the PHP! Which is another problem I keep experiencing when I forget I'm in the middle of some PHP and use a single quotation mark as mentioned in a comment below).

In this you could just have single quotes $(wrapper).append('...'). You can also use the HTML quotes (") as well in a general case. — Spencer Wieczorek
– Spencer Wieczorek, Commented Sep 23, 2016 at 23:11
See my UPDATE. The whole thing is wrapped in single quotation marks. — Snowcrash
– Snowcrash, Commented Sep 23, 2016 at 23:20

Aᴄʜᴇʀᴏɴғᴀɪʟ · Accepted Answer · 2016-09-23 23:27:48Z

1

You could perhaps use templating strings in JavaScript. Makes it simple to insert variables into a string too with ${var} syntax.

echo '$(wrapper).append(`<input type="text" name="thingummy[${id}]" data-id="${data_id}" id="${id}_${data_id}" /> <br>`);';

answered Sep 23, 2016 at 23:27

Aᴄʜᴇʀᴏɴғᴀɪʟ

3,0974 gold badges28 silver badges51 bronze badges

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

Comments

mimarcel · Accepted Answer · 2016-09-24 00:40:16Z

0

You could use heredoc syntax like this:

<?php
echo <<<JAVASCRIPT
<script type="text/javascript">
alert("some javascript code where you don't have to escape double quotes");
</script>
JAVASCRIPT;

This would simplify you work.

Or you can close your php tag and open it again, like this:

<?php
$somePhpCode = 1;
?>
<script type="text/javascript">
alert("some javascript code where you don't have to escape double quotes");
</script>
<?php
$somePhpCode = 2;
?>

answered Sep 24, 2016 at 0:40

mimarcel

6957 silver badges20 bronze badges

Collectives™ on Stack Overflow

Escaping HTML in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related