JQuery and Html ignore quotes

Question

i'm programming in JS and html and having problem with displaying to the users strings which contains double quotes. I have strings, which can be edited by the users by adding free text. I need to allow my uses to enter strings like = Hello "some text" bye. later this edited by user block of text is being saved to my DB. After a quick check i found out that the string is being saved correctly. later on i have to display to the users these block of text. When i'm sending this list back (to client side) my object are correct, aka, containing all of the edited string (for example - Some text "other text"). Later i'm trying to display this text in html by pushing each line to the html:

htmlID.push('<input type=text value="'+MyString+'">')

but unfortunately i'm getting only the part of the string which is not inside the quotes, aka, Some text and "other text" is being skipped by html because of the quotes.( All the text inside the quotes in skipped and the quotes themselves as well. )

I think what i have to do is run over each string, check indexOf quotes and if so, replace them by other value like """ or """ but unfortunately i couldn't get any results.

i would be glad for some help, thank you

Answer 1

You need to replace all instances of " within the string with its HTML entity: " :

 var MyString = 'Hello "some text" bye'.replace(/"/g, '&quot;'); $('#container').append('<input type="text" value="' + MyString + '">'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div> 

Answer 2

If you create a DOM element like below you wont have any problems with quotes.

var input = document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('value',MyString);

htmlID.push(input.outerHTML);