我在单引号的属性中得到双引号，我该如何阻止它？

Question

I've a variable and I stored a tag in this. I set this tag inside the double quotes and my tag has some attributes and events which are in single quotes. Now problem is that I'm getting double quotes inside the tag which were single quotes before. I want to get single quotes inside the tag of some attributes

var test= "<tr><td><input type='text' class='demo_class' onchange='myfun(this,'val')'></td></tr>"

It's giving me result in browser

<input type="text" class="demo_class" onchange="myfun(this,"val")">

but I want to get

<input type="text" class="demo_class" onchange="myfun(this,'val')">

Answer 1

var test = '<tr><td><input type=\"text\" class=\"demo_class\" onchange=\"myfun(this,\'val\')\"></td></tr>';

Answer 2

You need to escape the quotes contain in a same quotes type with the \ symbole.

Example:

var test = '<tr><td><input type="text" class="demo_class" onchange="myfun(this,\'val\')"></td></tr>';

Else the string starting by ' or " is considered terminated to the first non escaped ' or " encountered.

Also the quotes delimiting the html's attributes values are always resolved to " independent of what you use ' or " in your js, so that can avoid most confusion to always delimite the values of your html attributes by the " symbole like in this example.

 document.body.innerHTML = '<input type="text" class="demo_class" onchange="myfun(this,\'val\')">';

Answer 3

You could try with two approaches:

1. Use a method to sanitize your HTML and send your test var through this: result = sanitize(test); .

    const sanitize = (str) => { return String(str).replace(/"/g, "'"); };

2. Try using HTML entities as " and template literals instead of the simple quote symbol.

const Q = """
let test= `<tr><td><input type=${Q}text${Q} class=${Q}demo_class${Q} 
onchange=${Q}myfun(this,${Q}val${Q})${Q}></td></tr>`

EDIT

3. It's possible that it'll work with the string interpolation approach.

let test= `<tr><td><input type='text' class='demo_class' onchange='myfun(this, 'val')'></td></tr>`

Answer 4

I got the solution which is given below.

var test= "<tr><td><input type='text' class='demo_class' onchange='myfun(this,&apos;val&apos;)'></td></tr>"

Thank you all:)