How escape multiple quotes in a string in javascript

Question

var mystring1= "'Create new folder' not working (Registry Fix)";
var mystring2 = ""Create new folder" not working (Registry Fix)";
var str = "<div itemname="+mystring1+" title ="+mystring2+">";

But when i'm inspecting the element after this html is rendered i see

"div itemname "Create new folder" not working (Registry Fix) title "Create new folder" not working (Registry Fix)>

But i want in this format

<div itemname='Create new folder' not working (Registry Fix) title="Create new folder" not working (Registry Fix)>

I want a general escape sequence method to use for both single quotes and double quotes.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation and https://stackoverflow.com/questions/7753448/how-do-i-escape-quotes-in-html-attribute-values — epascarello, Oct 07 '20 at 21:38
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals — Taplar, Oct 07 '20 at 21:39
You should be getting a syntax error on the `var mystring2` line. — Barmar, Oct 07 '20 at 21:40
[How do I format my posts using Markdown or HTML?](https://stackoverflow.com/help/formatting) — Andreas, Oct 07 '20 at 21:42
What you want doesn't seem to be right, either. Everything after `Create new folder` isn't part of the attributes. — Barmar, Oct 07 '20 at 21:42
'Create new folder' not working (Registry Fix) This is the entire string i want — Sanjay, Oct 07 '20 at 21:43
@Sanjay Then it should be `itemname="'Create new folder' not working (Registry Fix)"` — Barmar, Oct 07 '20 at 21:47
And `title='"Create new folder" not working (Registry Fix)'` — Barmar, Oct 07 '20 at 21:47
The code you posted can't be what you're actually running, since it has a syntax error. And if you fix the syntax error, it won't produce the actual results that you show. — Barmar, Oct 07 '20 at 22:17
@Tibebes.M That doesn't solve the problem of the quoting in the attributes, just quoting of the string literals. — Barmar, Oct 07 '20 at 22:17

Barmar · Accepted Answer · 2020-10-07T22:18:31.420

1

The best solution is to not use string operations to create DOM elements, use DOM methods.

var mystring1 = "'Create new folder' not working (Registry Fix)";
var mystring2 = '"Create new folder" not working (Registry Fix)';
var div = document.createElement("div");
div.setAttribute("itemname", mystring1);
div.setAttribute("title", mystring2);
div.innerText = "hover or click on me";
div.addEventListener("click", function() {
  console.log(this.getAttribute("itemname"));
}); document.getElementById("container").appendChild(div);

<div id="container">
</div>

edited Oct 07 '20 at 22:18

answered Oct 07 '20 at 21:46

Barmar

741,623
53
500
612

If i want to create inputs and span classes inside that DOM how do i achieve it using DOM methods? – Sanjay Oct 07 '20 at 21:55
The same way, with `document.createElement` and `div.appendChild` – Barmar Oct 07 '20 at 22:13

Yugma primalka newamal fernand · Answer 2 · 2020-10-07T23:45:42.290

-1

Use escape character \ where you need to escape string literals.

var mystring1 = "'Create new folder' not working (Registry Fix)";

var mystring2 = "\"Create new folder\" not working (Registry Fix)";

var str = "<div itemname = \"" + mystring1 + "\" title = '" + mystring2 + "'>Something</div>";

edited Oct 07 '20 at 23:45

answered Oct 07 '20 at 22:08

Yugma primalka newamal fernand

47
4

This won't work correctly, you need quotes around the attributes. And the quotes can't match the quotes that are in the attributes. – Barmar Oct 07 '20 at 22:14
I wrote the answer to get the output what you've posted. This answer will give you the output for expected format. which is -
– Yugma primalka newamal fernand Oct 07 '20 at 23:07
He's obviously not quoting it correctly in the HTML he wants, either. – Barmar Oct 07 '20 at 23:09
1

This is the same as what he wrote, except you fixed the syntax error in the string literal. But that's obviously not what he's actually running because it can't run at all. – Barmar Oct 07 '20 at 23:09
Note here that in my answer I purposely removed close element. So until you put the closing tag, the div is incomplete. So it should be like this var str = "
"; – Yugma primalka newamal fernand Oct 07 '20 at 23:12
Yes, absolutely correct. So using the setAttribute method he can dynamically add attributes to div element. – Yugma primalka newamal fernand Oct 07 '20 at 23:22
There's no `` in the question. – Barmar Oct 07 '20 at 23:30
Yes Barmar, that's why I didn't include it. I edited the answer a little bit. It should work now. But your answer is the better and perfect fit for this problem. Thank you for pointing it out. – Yugma primalka newamal fernand Oct 07 '20 at 23:49
Thank you for the solutions, I tried with DOM methods as @Barmar said. Now its working file for me. And sorry I forgot to close div tag in question. – Sanjay Oct 08 '20 at 06:29

How escape multiple quotes in a string in javascript

2 Answers2