input value formation with double quotation marks and single quotes

Question

I have problem in the input "value".

$("#printCard").append("<input type='hidden' name='textCard' value='that aren't on the battlefield have flash. ' id='texting'>");

or JSON:

$("#demo").append("<input type='hidden' name='textCard' value='"+ infoCard.text +"' id='texting'>" );

Result:

<input name="textCard" value="that aren" t="" on="" the="" battlefield="" have="" flash.="" '="" id="texting" type="hidden">

The problem is double quotation marks and single quotes(aren't..).

This example:

The two options I have to save, double quotation marks and single quotes.

thank you all

I have created a function doing regex, and it does not work. — A. M. Mérida, Apr 11 '18 at 23:25
did you try infoCard.text.replace(/'/g, "\\'")? please post your attempt and output from it — Dror, Apr 11 '18 at 23:33
now... the problem is double quotation marks, dont work ".replace()". look this: strInputString = vlr.replace(/'/g, "\\'").replace(/"/g, '\\"'); — A. M. Mérida, Apr 11 '18 at 23:43
my solution is this: strInputString = vlr.replace (/ '/ g, "\\'"). replace (/ "/ g," \ '"); change double quotes by single quotes. This is good for me. — A. M. Mérida, Apr 11 '18 at 23:56
From review: I voted to leave this question open because it has two components covered separately in [Escaping single quotes in JavaScript string for JavaScript evaluation](https://stackoverflow.com/questions/15087497/escaping-single-quotes-in-javascript-string-for-javascript-evaluation) and [How do I escape quotes in HTML attribute values](https://stackoverflow.com/q/7753448/5217142). @Barmar 's jQuery answer to this question covers both. — traktor, Apr 12 '18 at 00:17

score 2 · Answer 1 · answered Apr 12 '18 at 00:01

2

I recommend using the object-based method, then you don't have to worry about special characters in HTML.

$("#printCard").append($("<input>", {
    type: "hidden",
    name: "textCard",
    value: infoCard.text,
    id: "texting"
});

answered Apr 12 '18 at 00:01

Barmar

741,623
53
500
612

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

If you don't need to support IE use template literals. TL are strings that have an easier syntax and extra properties. Here's a comparison between TL and SL (String Literal):

Syntax

SL: Wrap strings in double or single quotes. If the content of string has quotes as well, they should either be escaped by being prefixed with a backslash:

\" and \'

OR use HTML entities:

‘ or  (Left Single QUOtation mark)
’ or  (Right Single QUOtation mark)
“ or  (Left Double QUOtation mark)
” or  (Right Double QUOtation mark)

Note: These particular quotes represented by HTML entities are the curvy or smart quotes type and can only be used in plain text not code. The quotes used in code are straight, do not confuse them as universally accepted they are as different as a comma is to a period.

It's ok to use ’ as an apostrophe - Unicode9.0.0, ch06, pg. 276

TL: Wrap strings in backticks, also called grave accent, On a QWERTY keyboard the key is located at the top left corner `.

`template literal`

Concatenation vs. Interpolation

SL: A mess of single quotes, double quotes, and pluses:

var str = '<input id="'+ID+'" class="form-control">';

TL: Wrap variables and expressions in: ${...}:

var str = `<input id="${ID}" class="form-control">`;

Demo

var infoCard = {
  text: "that aren&rsquo;t on the battlefield have flash."
};

$("#printCard0").append(`<input type='hidden' name='textCard' value='that aren&rsquo;t on the battlefield have flash.' id='texting0'>`);


$("#printCard1").append(`<input type='hidden' name='textCard' value='${infoCard.text}' id='texting1'>`);

<main id='core'>

  <figure id='printCard0'></figure>

  <figure id='printCard1'></figure>

</main>





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

input value formation with double quotation marks and single quotes

2 Answers2

Syntax

Concatenation vs. Interpolation

Demo