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呈现如下 - ＆gt;

任何人都可以帮我解决这个问题。

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>