在javascript中设置一个等于变量的HTML字符串[重复]

Posted 2023-02-16

【中文标题】在javascript中设置一个等于变量的HTML字符串[重复]

【英文标题】：Set a string of HTML equal to a variable in javascript [duplicate]

【发布时间】：2013-02-01 21:41:13

【问题描述】：

我声明了一个 html 字符串并将其设置为一个变量。我想不出它会产生错误的任何原因，但它是：

未捕获的 SyntaxError：Ln 136 上出现意外标识符。

Ln 136: new_comment = '
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>
       </span>
       <span class="comment-text">
          ' + text + '
       </span>
       <span class="comment-time">
          2d
       </span>
    </li>
';

【问题讨论】：

javascript 不喜欢字符串中的换行符。如果需要，将它们更改为 \n 或使用 \ 转义它们

***.com/questions/13808042/…

定义了“文本”变量？

Alexander 是第一个回答（实际上是在我的评论之后第二个，但仍然值得打勾以获得好的答案）。

@mplungjan 真；在我点击提交后，我看到亚历山大在我面前回答了我的答案。但是，（不想听起来很琐碎）我的回答更彻底，并给出了多种解决方案。

【参考方案1】：

如果您想在实际代码中包含换行符以使其更易于阅读，则需要使用反斜杠对每个换行符进行转义，例如：

var new_comment = '\
    <li class="photobooth-comment">\
       <span class="username">\
          <a href="#">You</a>\
       </span>\
       <span class="comment-text">\
          ' + text + '\
       </span>\
       <span class="comment-time">\
          2d\
       </span>\
    </li>\
';

或者您需要将它们连接为单独的字符串，如下所示：

var new_comment = ''+
    '<li class="photobooth-comment">' +
       '<span class="username">' +
          '<a href="#">You</a>' +
       '</span>' +
       '<span class="comment-text">' +
          text +
       '</span>' +
       '<span class="comment-time">' +
          '2d' +
       '</span>' +
    '</li>'+
'';

或者干脆放在一行上：

var new_comment = '<li class="photobooth-comment"><span class="username"><a href="#">You</a></span><span class="comment-text">' + text + '</span><span class="comment-time">2d</span></li>';

不那么容易阅读，但更适合您的 JavaScript！

【参考方案2】：

你能做的最接近你想要的就是转义换行符。

new_comment = '\
    <li class="photobooth-comment">\
       <span class="username">\
          <a href="#">You</a>\
       </span>\
       <span class="comment-text">\
          ' + text + '\
       </span>\
       <span class="comment-time">\
          2d\
       </span>\
    </li>\
';

除此之外，您还可以使用字符串连接。

（我发现了一个可能的重复项：How to create multiline strings）

【参考方案3】：

您正在使用jquery，因此，使用jquery，您可以将<li> 放在HTML 页面中，并使用.html() 方法获取匹配元素集中第一个元素的HTML 内容或设置HTML像这样的每个匹配元素的内容

 var new_comment = $(".photobooth-comment").html();
   //do what you want to 

【讨论】：

我没有对你投反对票。但是，您没有考虑 text 变量。所以，这很容易失败

【参考方案4】：

这是一个受 php 启发的顽皮方法。 我把它贴在这里作为一种心理锻炼。请不要投反对票...

DEMO

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>
       </span>
       <span class="comment-text">
          $text
       </span>
       <span class="comment-time">
          2d
       </span>
    </li>
EOF*/
// note the script tag here is the hardcoded as the first tag 
new_comment=document.getElementsByTagName('script')[0].innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

【讨论】：

"...我将替换文本 var 作为练习留给读者...,"你在开玩笑吗？如果是这样的话，这不是正确的地方

这是一种天真的方式。但是，好的，不错的尝试:)

我知道它有效。但是，您只是增加了另一层复杂性。比如$text作为字符串和$text作为变量不能区分