Javascript-变量中的双引号

Question

我正在尝试使用javascript动态创建html标签。 请参考下面的代码。

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"); 
    }
}

我的问题是，这里的变量value.ListItemAllFields.Image_x0020_Description包含一个以双引号开头的字符串。

所以我的html呈现如下->

有人可以在这种情况下帮助我吗？

Answer 1

如果您使用的是jQuery（并且您的代码段中暗示有Lightbox属性），则可以使用它来避免使用不可靠的字符串串联来构建元素：

// 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

我相信您应该只删除单引号之前的双引号，因为无论如何它们都包含在变量中。 像这样：

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>';

如果您能够使用ES6或Babel（将ES6转换为较旧的浏览器的较旧的JavaScript），则还可以使用字符串模板，该模板使用反引号（“ 1”键的左侧）代替引号：

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

尝试编码变量引号：

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

这是带有编码的代码段：

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