How to "Quote" a String in jQuery?

Question

Info's: I have some javascript code that i will show below, who i'm having problem with quotes.

html = [];
style = 'class=odd';
html.push('<li '+style+' onclick=SelectItem("'+ele.id+'","'+idItem+'","'+dsItem+'","'+qtItem+'"); >'+id+' - '+$iObjItensListaVenda.result.ds_item[i]+'</li>');

I have strings that i get from a JSON Object, as you see above.

Problem: But when i'm trying to place it as a Function Parameter on the onClick event of the <li> element, my resulting html <li> element becomes totally unformatted like that:

<li natural,"150");="" white="" american="" onclick="SelectItem("descItem1","2",TELHA" class="odd">00002 - TELHA AMERICAN WHITE NATURAL</li>

What do i want: i need a solution like a function, maybe already exists in jQuery, to Quote my String. Like a QuoteStr("s t r i n g"); to become ""s t r i n g"".

Maybe you're complaining about:

The variable ele is a html <input> element.
The variable idItem contains only numbers, they come from a JSON Object.
The variable dsItem its a string containing Item Description, it comes from the JSON Object too.
The variable qtItem contains only numbers, it is the quantity of the items, it comes from the JSON too.

Here's a thorough answer that deals with escaping quotes: http://stackoverflow.com/a/9756789/470480 — Radley Sustaire, Jan 20 '14 at 18:23
possible duplicate of [How do I escape quotes in HTML attribute values?](http://stackoverflow.com/questions/7753448/how-do-i-escape-quotes-in-html-attribute-values) — gcochard, Jan 20 '14 at 18:25
The sane solution would be to use jQuery to bind the event handler, not building an HTML string. — Felix Kling, Jan 20 '14 at 18:29
@FelixKling this will be problematic because i have dinamic parameters and if im thinking about bind one each one, there is a problem because my `

score 2 · Answer 1 · edited May 23 '17 at 12:21

2

The sane solution would be to use jQuery to build the element and bind the event handler, not building an HTML string:

var $li = $('<li />', {
    "class": "odd",
    on: {
       click: function() {
           SelectItem(ele.id, idItem, dsItem, qtItem);
       }
    },
    text: id + ' - ' + $iObjItensListaVenda.result.ds_item[i]
});

If you are doing this in a loop and the variables end up having the wrong values, please see JavaScript closure inside loops – simple practical example. Alternative you could use jQuery's .data API to set and get those values.

edited May 23 '17 at 12:21

Community

1
1

answered Jan 20 '14 at 18:34

Felix Kling

795,719
175
1,089
1,143

How i can implement this method when i need to append a lot of `
`'s to my desired `
- ` inside a loop and then using `document.getElementById('my_div').innerHTML = array.join('');` to put it inside the ul.

Paulo Roberto Rosa

Jan 20 '14 at 18:54

appending one by one inside the loop? this is not slow? – Paulo Roberto Rosa Jan 20 '14 at 18:56

You can also append all of them at once after the loop. `.append` accepts an array of DOM elements. Or you can add each of the `li` elements to a jQuery object and just append that one. – Felix Kling Jan 20 '14 at 18:57

how? because i do have only one `$li` variable that stores one custom `

`

– Paulo Roberto Rosa Jan 20 '14 at 18:58

score 0 · Answer 2 · answered Jan 20 '14 at 18:23

0

Try \" instead of ' in onClick

$(".container").append("<a href='javascript:void(0)' onClick=\"showField('"+data.name+"','"+data.text+"');\">Edit</a>");

answered Jan 20 '14 at 18:23

Perefexexos

252
1
8

Shomz · Answer 3 · 2014-01-20T18:34:30.367

0

You can always use backslash to escape quotes:

console.log('te\'st'); // te'st
console.log("te\"st"); // te"st

You can do the same thing for your string, but I'd suggest you rewrite the whole thing into something more usable. By that I mean not using strings to build objects, but building objects directly.

For example:

var li = document.createElement('li');
li.className = myClass;
li.onclick = function(){/*...*/};

It gets even easier with jQuery.

edited Jan 20 '14 at 18:34

answered Jan 20 '14 at 18:26

Shomz

37,421
4
57
85

Note that won't work for quotes inside attribute values. – Kevin B Jan 20 '14 at 18:27
@KevinB Attributes seem wrong even when they first come from JSON... However, my answer was about fixing the onclick part... there's a lot of mess. But I'd really rewrite the whole thing. – Shomz Jan 20 '14 at 18:28

score 0 · Answer 4 · answered Jan 20 '14 at 18:30

0

You can use quotes in a string by escaping them with a backslash.

var text = "s t r i n g";
"\"" + text + "\"" === "\"s t r i n g\"";

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

answered Jan 20 '14 at 18:30

Boric

822
7
26

How to "Quote" a String in jQuery?

4 Answers4