javascript - 无限期地在单引号和双引号之间交替

Question

我在处理多个嵌入/交替引号时遇到问题，希望有人可以帮助解决。这是相关代码...

displayMessage(

    "post success!", 

    "<p style='margin-top: 15px; margin-bottom: 15px'>if you'd like to share your post...</p> 

    <a onclick='openSharePopup("+textA+","+numberA+","+numberB+")' style='cursor: pointer; font-size:16px'>
        share
    </a>"

);

function displayMessage(heading, text){
  $("#displayMessageHeadingDiv").html(heading);
  $("#displayMessageBodyDiv").html(text);
  $("#displayMessageParentDiv").css("display","block");
}

displayMessage() 在用户成功在网站上发布内容后被调用，并且除非“textA”包含撇号(例如“Mike's Opinion”之类的内容)，否则它可以正常工作

问题是(我认为)是虽然 textA 封装在双引号内 - 这些双引号已经在我的 onclick 属性的单引号内 - 它本身位于 displayMessage 的整个第二个参数的更多双引号内。

我之前认为单引号和双引号之间的交替可以无限期地继续，但这个例子似乎表明不然。我还尝试过使用这些替代方法来打破 textA 中的任何引号，但都没有奏效...

textA = JSON.stringify(textA).replace(/&/, "&").replace(/"/g, """);

textA = textA.replace("'","\'");

关于我哪里出错了有什么想法吗？

Answer 1

你的方法从根本上来说是错误的。手动创建内联事件处理程序几乎总是错误的方法。

更好的解决方案例如:

var shareLink = $( '<a>share</a>' )
                    .css({ cursor: 'pointer', 'font-size': '16px' })
                    .click( function() {
                            openSharePopup( textA , numberA, numberB );
                        });

var msg = $( "<p>if you'd like to share your post...</p>" )
              .css({ 'margin-top': '15px', 'margin-bottom': '15px' });

displayMessage( "post success!", shareLink.add( msg ) );

function displayMessage(heading, text){
  $("#displayMessageHeadingDiv").html(heading);
  $("#displayMessageBodyDiv").empty().append(text);
  $("#displayMessageParentDiv").show();
}

本质上，您应该创建元素，通过代码添加单击处理程序，然后将元素直接添加到容器中。这样您就不必考虑使用哪种类型的引号以及在何处使用。

(作为风格上的另一个注释，使用 CSS 类来设置元素样式而不是内联样式要好得多。)