在带有 innerHTML 的 Javascript 中使用引号

Posted 2023-02-24

【中文标题】在带有 innerHTML 的 Javascript 中使用引号

【英文标题】：Using quotation marks in Javascript with innerHTML

【发布时间】：2016-02-16 21:31:57

【问题描述】：

我已经编写了一些代码来在故事进行时更新玩家。当玩家点击一个按钮时，他们会看到一些新的文本和更多的选项。到目前为止一切顺利，但是当我传递带有附加参数的函数调用时，我需要单引号和双引号。但是，如果我同时使用两者，那么这会破坏 innerhtml。代码如下（如果需要也可以发布HTML）：

function buttonClicked(buttonid)  
     switch(buttonid) 
    case "YesStart":
        document.getElementById("storybox").innerHTML = "Initially she fails to notice you and stares into the distance with dazed look of someone who has considered the exact point at which the universe might have ended, present within a kind of altered dimensionality that places her materially at a similar point of existence to you, while leaving her utterly absent from it in some other, more absolute sense. Two nuns scurry past her, heading towards a small, fluffy dog, who they pet while making cooing sounds; a stern man in an ill-fitting police officer's uniform eyes them suspiciously. This spectacle seems to rouse her from her trance, and she looks quizzically at them, tilting her head to one side, before spotting you out of the corner her eye and waving you over.</p><p>When you arrive at the hotel it is empty but for two bleary eyed reception staff who stare as you walk past. Deer-Wolf tells you this is the place where the murderer lives. He rents a different room each week, always under different assumed names. He tells people this is because he is married, and likes to take women back unnoticed. The staff have never seen one leave, but the room is always impeccably kept, so the uneasy feeling the hotel staff have about him has never yet been officially corroborated.</p>";
        break;
    case "NoStart":
        document.getElementById("storybox").innerHTML = "<p>You try to fall asleep in your bed but you cannot. Your heart is beating so fast you feel like it will fail. All night you are plagued by images of your still conscious body being cut open at autopsy. You wake up often. During the days you are afraid to be left alone. The only solace you have is a lady who calls herself Deer-Wolf, who texts you often and calls you on occasion. You find her voice comforting but you are still afraid, and feel that you will never be fully safe until you solve the case. You ask your friends for help, even offer to pay them to investigate but they either ignore you, decline, or tell you to go away. You are not sure if they believe you and are too scared, or if they think you are crazy. Either way, they won't help.</p><p>Do you choose to investigate?</p>
        <button type='button' class='btn btn-success' id='yesbtn' onclick='buttonClicked('YesStart')'>Yes</button><button type='button' class='btn btn-danger' id='nobtn' onclick='buttonClicked('NoStart')'>No</button>";
        break;
    default:
       console.log("Do you write your button function call correctly? Bad function call. Bad.");
    ;

;

谁能提出解决方案？

【问题讨论】：

懒得翻译...ru.***.com/a/456039/178988

啊。 javascript 嵌套在 HTML 中嵌套在 JavaScript 中（可能依次嵌套在 HTML 中）。试图让所有的转义正确降低许多级别会让你头疼。停止玩弦乐，改用createElement、createTextNode、appendChild、setAttribute 和addEventListener。

【参考方案1】：

你必须用 \ 来逃避它们。

"This is a string with \"quotation\" marks."

How to include quotes in a string

【讨论】：

是的，我试过了，但是没有用。让我再试一次。

还是要分清单引号和双引号。例如，"onclick='buttonClicked(\'NoStart\')'" 将不起作用，因为您对参数和参数都使用单引号。 "onclick='buttonClicked(\"NoStart\")'" 会起作用。

啊，太好了！再看一遍，这似乎是问题所在。感谢您的帮助。

【参考方案2】：

由于这是 HTML，我会尝试在字符串中使用 "。

【参考方案3】：

function test1() 
  eval("console.log('\'text\'')");


function test2() 
  eval("console.log(\"'text'\")");


function test3() 
  eval("console.log('\\'text\\'')");

button 
  margin-bottom: .25em;

<button onclick="console.log("'text'")">Wrong</button>
<button onclick='console.log("'text'")'>Wrong too</button>
<br>
<button onclick="console.log(&quot;'text'&quot;)">Right</button>
<button onclick='console.log("&#39;text&#39;")'>Right too</button>
<button onclick="console.log(&quot;&#39;text&#39;&quot;)">And this one is right</button>
<br>
<button onclick="console.log('\'text\'')">Right with escaping</button>
<br><br>
<button onclick="test1()">Wrong in js</button>
<br>
<button onclick="test2()">Escaping outer in js</button>
<button onclick="test3()">Escaping inner in js js</button>
<br><br>
<button onclick=console.log("'text'")>And the final one - this way works too</button>

更多信息（俄语）：https://ru.***.com/a/456039/178988

【参考方案4】：

选择一种类型的报价作为包装，例如"，然后对于属性包装器，使用另一个，例如'。如果您随后需要任何其他嵌入式引号，请像 \' 一样将它们转义。

document.getElementById("storybox").innerHTML = "Initially she fails to notice you and stares into the distance with dazed look of someone who has considered the exact point at which the universe might have ended, present within a kind of altered dimensionality that places her materially at a similar point of existence to you, while leaving her utterly absent from it in some other, more absolute sense. Two nuns scurry past her, heading towards a small, fluffy dog, who they pet while making cooing sounds; a stern man in an ill-fitting police officer\'s uniform eyes them suspiciously. This spectacle seems to rouse her from her trance, and she looks quizzically at them, tilting her head to one side, before spotting you out of the corner her eye and waving you over.</p><p>When you arrive at the hotel it is empty but for two bleary eyed reception staff who stare as you walk past. Deer-Wolf tells you this is the place where the murderer lives. He rents a different room each week, always under different assumed names. He tells people this is because he is married, and likes to take women back unnoticed. The staff have never seen one leave, but the room is always impeccably kept, so the uneasy feeling the hotel staff have about him has never yet been officially corroborated.</p>";

供将来参考：请提供更简洁的示例。