0

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')">
Julian
  • 33,915
  • 22
  • 119
  • 174
Soft Technoes
  • 1,065
  • 1
  • 7
  • 18
  • 1
    Is typing inline event handlers a requirement? It is usually considered out of date practice and usually is better to add in data attributes and use an event listener. Here is an old post I have: https://stackoverflow.com/questions/16134910/how-do-i-escape-a-single-quote-in-javascript – Matthew Sep 28 '19 at 05:45
  • 1
    Possible duplicate of [How do I escape a single quote ( ' ) in JavaScript?](https://stackoverflow.com/questions/16134910/how-do-i-escape-a-single-quote-in-javascript) – Matthew Sep 28 '19 at 05:46
  • yes I need that event and those values – Soft Technoes Sep 28 '19 at 05:58
  • Yes, but do you need to attach it in the HTML tag itself or are you allowed to attach it by using an event listener in javascript? I would recommend the event listener to be the way to go, but do what you need in the scope of your work. – Matthew Sep 28 '19 at 06:00

4 Answers4

0
var test = '<tr><td><input type=\"text\" class=\"demo_class\" onchange=\"myfun(this,\'val\')\"></td></tr>';
Bilal Siddiqui
  • 3,579
  • 1
  • 13
  • 20
0

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\')">';
lp177
  • 83
  • 1
  • 6
  • I've test that on chrome and firefox and I retain what I have understand expected by your question. Simple test in your console: document.body.innerHTML = ''; I retain: Maybe precise how you use this string to update your html ? In which browser ? – lp177 Sep 28 '19 at 06:11
0

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 &quot; and template literals instead of the simple quote symbol.

const Q = "&quot;"
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

  1. 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>`
Stiakov
  • 81
  • 1
  • 4
0

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 :)

Soft Technoes
  • 1,065
  • 1
  • 7
  • 18