Question

我有一个对象，其属性值为string。

＆＃13;

var notificationDetails = {
  dangerMessage: "I love basketball and love to watch it in. <a href='www.nba.com'>Link</a>;",
  seats: "1 seatRemaining",
  pName: "Item 1",
  class: ""
};

document.write(notificationDetails.dangerMessage);

＆＃13;

如何将a元素转换为dangerMessage属性中的链接，它将读取为字符串而不是实际链接。提前谢谢。

我忘了说我正在使用mustache.js在对象中呈现该属性，看起来像这样

<script type="text/x-mustache-tmpl" id="order-template">
     <div>{{dangerMessage}} </div>
</script>

Answer 1

从评论中，您可以使用{{{dangerMessage}}}：

<script type="text/x-mustache-tmpl" id="order-template">
  <div>{{{dangerMessage}}}</div>
</script>

来自Doc：

默认情况下，所有变量都是HTML转义的。如果你想回来未转义的HTML，请使用三重胡须：{{{name}}}。

Answer 2

有效。

查看下面代码段的结果。

＆＃13;

var notificationDetails = {
  dangerMessage: "I love basketball and love to watch it in. <a href='www.nba.com'>Link</a>;",
  seats: "1 seatRemaining",
  pName: "Item 1",
  class: ""
};

document.write(notificationDetails.dangerMessage);

＆＃13;

编辑mustache.js： 要获得未转义的HTML ，您只需使用三倍括号{{{ }}}代替双括号{{ }}来转义html：

<div>{{{dangerMessage}}}</div>

Docs

Answer 3

您可以使用DOM元素的.innerHtml属性：

＆＃13;

function myFunction() {
  var notificationDetails = {
           dangerMessage: "I love basketball and love to watch it in. <a href='www.nba.com'>Link</a>;",
           seats: "1 seatRemaining",
           pName:  "Item 1",
           class:""
     };
    document.getElementById("demo").innerHTML = notificationDetails.dangerMessage;
}

＆＃13;

<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

＆＃13;

查看此页面：https://jsfiddle.net/o8nzwxt1/

将字符串转换为用于胡子模板的链接javascript对象

3 个答案: