Common approach to prevent error during concatenation because of a `quote` symbol

Question

I'm assembling an html tag as a string like this:

var tag = '<div some-attribute="' + attributeValue + '">';

The problem is that if attributeValue contains quotes ", the tag will be assembled with an error. What's the common approach to avoid such situation? I'm looking for a solution that accounts for all possible variations of a quote symbol.

The common approach is **avoid** using string concatenation to generate HTML. Use JS templates instead — hindmost, Jul 25 '16 at 08:39
`var tag = document.createElement('div'); tag.setAttribute("some-attribute",attributeValue); otherElement.appendChild(tag);` — Niet the Dark Absol, Jul 25 '16 at 08:40
@NiettheDarkAbsol, thanks, but what if the html string is huge and contains placeholders, and I can't control how it's created? — Max Koretskyi, Jul 25 '16 at 08:47
Well especially with a huge element, it is highly recommended to create a DOM object that you can directly apply your variables to. — RDardelet, Jul 25 '16 at 08:50

score 2 · Answer 1 · answered Jul 25 '16 at 08:41

2

you can use encodeURIComponent global method which will escape special characters from your string;

you will just have to decode it uppon accessing it with decodeURIComponent

var attributeValue = '"some'
var tag = '<div data-some-attribute="' + encodeURIComponent(attributeValue) + '">';
tag // "<div some-attribute="%22some">"

accessing it

var attribute = decodeURIComponent(div.getAttribute('data-some-attribute'));
attribute // "some

answered Jul 25 '16 at 08:41

eltonkamami

5,134
1
22
30

@Maximus again you will have to restore the values – eltonkamami Jul 25 '16 at 10:45
yeah, if required, at the moment I'm not expecting users to put quotes or ampersands into attribute value – Max Koretskyi Jul 25 '16 at 10:49
@Maximus you could also enforce correct formatting by stripping out those characters when they enter the value – eltonkamami Jul 25 '16 at 10:52

score 1 · Answer 2 · edited May 23 '17 at 10:29

I suggest you use the " double quotes in Javascript and contain within your string the ' single quotes that will be understood by html. Or reverse.

You can also escape the quotes that you want to be in the string and not part of the separation by placing a \ before them.

Your exemple would look like this:

var tag = "<div some-attribute=\"" + attributeValue + "\">";

But the BEST SOLUTION would be to dynamically create an objet that you would add the attributes to.

var tag = document.createElement('div'); // this creates a DOM div element
tag.setAttribute("some-attribute", attributeValue); // this changes the some-attribue to the value (could use with class)
containerElement.appendChild(tag); // this appends the newly created element as html in the container

I also suggest you check out this other question with a more complete response on how to create and append elements with Javascript.

score 1 · Accepted Answer · edited May 23 '17 at 12:10

This answer explains that if attribute value is enclosed with double quotes, then only two characters are not valid within an attribute value:

If your attribute value is quoted (starts and ends with double quotes "), then any characters except for double quotes and ampersands are allowed, which must be quoted as " and &

So I've replaced just these two characters and treat attribute value as safe afterwards:

var safe = attributeValue.replace("&", '&amp;').replace('"', '&quot;');
var tag = '<div some-attribute="' + safe + '">';

Common approach to prevent error during concatenation because of a `quote` symbol

3 Answers3