2017-02-14 104 views
0

我收到下面的字符串从我的Ajax请求HTML字符串:如何逃脱具有多双引号

As per json doc, "quotes must be escaped " 

这是存储在data.description和嵌入在模板:

'<a href="#"' + 'data-title="' + data.description + '"></a>' 

data-title的值被用作弹出的lightbox插件的标题。我尝试了以下功能:

var HtmlEncode = function(s) { 
      var el = document.createElement("div"); 
      el.innerText = el.textContent = s; 
      s = el.innerHTML; 
      return s; 
     } 

为:

'<a href="#"' + 'data-title="' + HtmlEncode(data.description) + '"></a>' 

现在由于data.description包含多个报价的JavaScript假定他们为多个参数,并抛出错误。我搜索了很多其他的建议在div中添加数据并检索其内部HTML的其他Stackoverflow帖子,但在我的情况下可能。

感谢

+0

http://stackoverflow.com/questions/7753448/how-do-i-escape-quotes-in-html-attribute-values –

回答

1

变化仅是相同将围绕data-title引号。像这样:

var description = data.description.replace(/"/g, "'"); 
var template = '<a href="#"' + 'data-title="' + description + '"></a>'; 
+0

我用它,但它是给出相同的结果。我不明白为什么把''''''改成'''“'会逃离html字符串。 – user31782

+0

@ user31782它不会逃避它,但它会解决问题!看看例子! –

+0

No no。The我显示的字符串是一个随机选择,json数据可以有',',''''和'''的任意组合。 – user31782

0

您可以用单引号或任何其他符号替换双引号,以便它在双引号内工作。 你可以用String.replace(/["]+/g,"'")这样做,这将用单引号替换字符串中的双引号,reg-ex中的g告诉它使用所有字符串。

你也可以使用2个单引号将它伪造,如String.replace(/["]+/g,"''"),它会伪造双引号给你。

var HtmlEncode = function(s) { 
     return s.replace(/["]+/g,"''"); 
    } 
0

解决方案1 ​​

逃避它与替换和正则表达式:

var HtmlEncode = function(s) { 
    return s.replace(/"/g, '\\"').replace(/'/g, "\\'"); 
} 
'<a href="#" data-title="' + HtmlEncode(data.description) + '"></a>' 

解决方案2

让jQuery的做这件事情(仅当您使用它)。

var tpl = $('<a href="#"></a>'); 
tpl.data('title', data.description); 
+0

您的第一个方法会导致错误,因为HtmlEncode(data因为'data.description'中的双引号引起了问题,但是你的第二个方法给了我另外一个想法来执行'$(“#mydiv”)。append(data.secription)' – user31782

+0

它在哪里给出错误?看看这个:http://codepen.io/DaniloPolani/pen/LxqXOz – Grork

+0

你在那里添加了单引号作为'根据json doc,“引号必须转义”'但我得到的json响应没有他们,我不要事件知道它有多少双引号。 – user31782

0

尝试用HTML实体等效替换引号,然后您可以安全地在属性上使用它。

var desc = data.description.replace(/'/g, "&#39;").replace(/"/g, "&#34;"); 

'<a href="#"' + 'data-title="' + desc + '"></a>' 

这是Fiddle来演示解决方案。