How do I put a string containing double quotes into an HTML input element's value tag so that it properly renders on the page?

Question

I've solved the problem but I wonder if there's a better way.

So, I have a string '"Apple": 20'. As you see, it contains double quotes. I want this string to render in a text input field.

Putting the string into the value attribute as is obviously wouldn't work:

<input type=text value=""Apple": 20"> --> output: empty

I've tried escaping the quotes with a backslash but it doesn't work either:

<input type=text value="\"Apple\": 20"> --> output: \

I figured, I need to replace the quotes with ":

let val = '"Apple": 20'
let re = /"/gi;
let modified_val = val.replace(re, '&quot;')

console.log(modified_val)
>>> &quot;Apple&quot;: 20

<input type=text value=""Apple": 20"> --> output: "Apple": 20 (success)

But I wonder if there is a better way to achieve that? Better than replacing double quotes with ".

EDIT:

I forgot to mention that I generate the HTML programmatically:

element.innerHTML += `<input type=text value="${modified_val}">`

So, the value tag always uses double quotes.

Probably, there's a better way to add elements to a page, without hardcoding the quotes. But, so far, it seems that you always have to "manually" escape HTML characters when writing JavaScript strings to HTML. Like here.

@Sanmeet I forgot to mention that I generate the HTML programmatically: element.innerHTML += `\`\`` So, the value tag always uses double quotes. — m_ocean, Jun 23 '21 at 08:29

score 1 · Accepted Answer · answered Jun 23 '21 at 11:25

Since you didn't provide any html I assumed one !

HTML

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

JS

Using document.createElement method to first create an input element add some attributes and finally append it to main div. (RECOMMENDED)

  const div = document.querySelector("#div")
  let value = '"Abc" : b';
  let input = document.createElement('input')
  const attributes = {
    type : "text",
    value : value
  }
  Object.entries(attributes).forEach( pair => input.setAttribute(pair[0], pair[1]))
  div.appendChild(input)

Using innerHTML without escaping string , the hack is just wrap the value string with the same qoute ( double or single) as the value attribute qoute used ! ( NOT RECOMMENDED )

  const div = document.querySelector("#div")
  let value =  '"Abc" : b';
  div.innerHTML += `
    <input type="text"  value='${value}' />
  `

@m_ocean didn't knew about that innerHTML u should have mentioned it earlier and the html also with it ! ... Just tell me if this answer solves your problem ... It's without escaping characters — Sanmeet, Jun 23 '21 at 11:27
Thank you very much! I'll rewrite my code soon and update you! — m_ocean, Jun 23 '21 at 16:30

score 0 · Answer 2 · answered Jun 23 '21 at 08:01

0

You can also delimit it with single quotes

<input type="text" value='"Apple": 20'/>

The above will have the value as "Apple": 20 in the input box

answered Jun 23 '21 at 08:01

Elakya

41
4

I forgot to mention that I generate the HTML programmatically: element.innerHTML += `\`\`` So, the value tag always uses double quotes. – m_ocean Jun 23 '21 at 08:29
@m_ocean That makes no difference in the answer. Write `` then (notice the ' instead of "). You will have to escape `'` with.. i think it is `'`. Using `&...;` is HTML standard for escaping, so you did that correctly. – Peter Krebs Jun 23 '21 at 08:39
It is going to be same.. element.innerHTML += `` – Elakya Jun 24 '21 at 11:45

How do I put a string containing double quotes into an HTML input element's value tag so that it properly renders on the page?

2 Answers2