Javascript-变量中的双引号

Question

I am trying to create html tags dynamically using javascript. Please refer to below code.

function getPhotosSuccess(data) {

    if (data.d.results.length > 0) {

        var response = data.d.results;
        var innerhtml = "";

        $.each(response, function(key, value) {
            var newItem = '<div class="item"><div class="well"><a href="' + value.ServerRelativeUrl + '" data-lightbox="roadtrip" data-title="' + value.ListItemAllFields.Image_x0020_Description + '"><img class="img-responsive" src="' + value.ServerRelativeUrl + '" alt=""></a></div><div><p>' + value.ListItemAllFields.Image_x0020_Description + '</p></div></div>';
            innerhtml += newItem;
        });

        $("#masonryPicGallery .row:eq(0)").html(innerhtml);

    } else {

        console.log("empty response from server"); 
    }
}

My problem is, here variable value.ListItemAllFields.Image_x0020_Description contains a string that starts with double quote.

So my html renders as following -->

Can anybody please help me out with this scenario.

Answer 1

If you're using jQuery (and the presence of Lightbox attributes in your snippet suggests you are) you can use that to avoid using unreliable string concatenation to build your elements:

// create DOM entries without variables
var $newItem = $('<div class="item"><div class="well"><a data-lightbox="roadtrip"><img class="img-responsive" alt=""></a></div><div><p></p></div></div>');

// then populate the appropriate fields using jQuery DOM traversal
$newItem.find('a').attr({
     'href': value.serverRelativeUrl,
     'data-title': value.ListItemAllFields.Image_x0020_Description
   }).find('img')
     .attr('src', value.ServerRelativeUrl);

$newItem.find('p').text(value.ListItemAllFields.Image_x0020_Description);

Answer 2

I believe you should just have to remove the double quotes that come just before the single quotes since those are included in the variable anyway. So like this:

var newItem = '<div class="item"><div class="well"><a href="' + value.ServerRelativeUrl + '" data-lightbox="roadtrip" data-title=' + value.ListItemAllFields.Image_x0020_Description + '><img class="img-responsive" src="' + value.ServerRelativeUrl + '" alt=""></a></div><div><p>' + value.ListItemAllFields.Image_x0020_Description + '</p></div></div>';

If you're able to use ES6 or Babel (which transpiles ES6 into older JavaScript for older browswers) you can also use string templates, which use backticks (left of the '1' key) instead of quotes:

var newItem = `<div class="item"><div class="well"><a href="${value.ServerRelativeUrl}" data-lightbox="roadtrip" data-title="${value.ListItemAllFields.Image_x0020_Description}"><img class="img-responsive" src="${value.ServerRelativeUrl}" alt=""></a></div><div><p>${value.ListItemAllFields.Image_x0020_Description}</p></div></div>`;

Answer 3

Try to encode the variable quotes:

var variable = '"my test value" haha';
variable = variable.replace(/"/g, """);
console.log(variable);

Here's a snippet with encoding:

 <div class="&quot;test&quot;test">inspect this class</div>