How to escape html string having multiple double quotes

Question

I have received the following string from my ajax request:

As per json doc, "quotes must be escaped "

This is stored in data.description and is embedded in the template as:

'<a href="#"' + 'data-title="' + data.description + '"></a>'

data-title's value is used as a caption for lightbox plugin pop up. I tried the following function:

var HtmlEncode = function(s) {
            var el = document.createElement("div");
            el.innerText = el.textContent = s;
            s = el.innerHTML;
            return s;
        }

as:

'<a href="#"' + 'data-title="' + HtmlEncode(data.description) + '"></a>'

Now since the data.description contains multiple quotes javascript assumes them as multiple argument and throws error. I searched many other Stackoverflow posts which suggest to append the data in a div and retrieve its inner HTML but that is possible in my case.

Thanks

http://stackoverflow.com/questions/7753448/how-do-i-escape-quotes-in-html-attribute-values — dokgu, Feb 14 '17 at 15:06

ibrahim mahrir · Answer 1 · 2017-02-14T15:24:20.920

1

Change only the quotes that are the same as those will be surrounding the data-title. Like this:

var description = data.description.replace(/"/g, "'");
var template = '<a href="#"' + 'data-title="' + description + '"></a>';

edited Feb 14 '17 at 15:24

answered Feb 14 '17 at 14:57

ibrahim mahrir

31,174
5
48
73

I used it but it is giving same result. And I don't see why changing `' " '` to `" ' "` would escape the html string. – user31782 Feb 14 '17 at 14:59
@user31782 It won't escape it but it will solve the problem! see the example! – ibrahim mahrir Feb 14 '17 at 15:01
No no. The string I showed was a random choice. The json data could have any combination of `,`,`"` and `'`. – user31782 Feb 14 '17 at 15:01
Something strange happened. My `data-title` become `data-title="As per json doc, \"` It took the escaped quote as the closing quote. – user31782 Feb 14 '17 at 15:18
@user31782 I just tested and you're right. Seems the best way is to change them to other quotes (`this is a "string" with quotes` becomes `this is a 'string' with quotes`). See the update! – ibrahim mahrir Feb 14 '17 at 15:26
This last approach won't need any escaping! – ibrahim mahrir Feb 14 '17 at 15:26
I think a better way is to completely change all possible conflicting keywords `"`,`'`,`=`,`>`,`<`,`&`,`\` and the `backquote` to their respective html entities. This is what I have done now: `image_description.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'").replace(/\//g, "/").replace(/`/g, "`").replace(/=/g, "=")` – user31782 Feb 14 '17 at 15:35
I don't know about regex Is this correct way to escape inverted slash `x.replace(/\//g, "/")`? – user31782 Feb 14 '17 at 15:38
@user31782 That's too much escaping. The only thing to escape is `'` and `"`! – ibrahim mahrir Feb 14 '17 at 15:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/135697/discussion-between-user31782-and-ibrahim-mahrir). – user31782 Feb 14 '17 at 15:39
@user31782 See [my answer](http://stackoverflow.com/a/42229502/5530965) - it only converts single and double quotes to their respective HTML entities. – dokgu Feb 14 '17 at 15:42

score 0 · Answer 2 · answered Feb 14 '17 at 15:00

You can replace the double quotes in your string with single quotes or any other symbol in order for it to work inside double quotes. you can do this with String.replace(/["]+/g,"'") this will replace the double quotes in the string with a single quote, the g in the reg-ex tells it to use all the string.

you can also fake it by using 2 single quotes like this String.replace(/["]+/g,"''"), and it will fake double quotes for you.

var HtmlEncode = function(s) {
        return s.replace(/["]+/g,"''");
    }

score 0 · Answer 3 · answered Feb 14 '17 at 15:01

0

Solution 1

Escape it with replace and a regexp:

var HtmlEncode = function(s) {
    return s.replace(/"/g, '\\"').replace(/'/g, "\\'");
}
'<a href="#" data-title="' + HtmlEncode(data.description) + '"></a>'

Solution 2

Let jQuery doing this for you (only if you are using it).

var tpl = $('<a href="#"></a>');
tpl.data('title', data.description);

answered Feb 14 '17 at 15:01

Theraloss

700
2
7
30

Your first method gives error because `HtmlEncode(data.description)` is problematic because of double quotes in `data.description`. But your second method gave me another idea to do `$("#mydiv").append(data.secription)` – user31782 Feb 14 '17 at 15:08
Where does it give error? Check this out: http://codepen.io/DaniloPolani/pen/LxqXOz – Theraloss Feb 14 '17 at 15:16
You added single quotes there as `As per json doc, "quotes must be escaped "` But the json response I get doesn't have them and I don't event know how many double quotes it has. – user31782 Feb 14 '17 at 15:19
I don't understand. "replace" like those replace all occurrences. I used single quote for the string as you, please see the codepen. You can of course use double quotes for the string but you have to invert them with the single for "data-title". Maybe it's me, but I can't understand the problem. Can you reproduce it? – Theraloss Feb 14 '17 at 15:33

dokgu · Answer 4 · 2017-02-14T15:48:56.073

0

Try to replace the quotes with HTML entity equivalents after which you can then safely use it on attributes.

var desc = data.description.replace(/'/g, "&#39;").replace(/"/g, "&#34;");

'<a href="#"' + 'data-title="' + desc + '"></a>'

Here's a Fiddle to demonstrate the solution.

edited Feb 14 '17 at 15:48

answered Feb 14 '17 at 15:04

dokgu

4,957
3
39
77

How to escape html string having multiple double quotes

4 Answers4