在 Javascript 中使用跨度和符号更改 HTML [重复]

Posted 2023-02-24

【中文标题】在 Javascript 中使用跨度和符号更改 HTML [重复]

【英文标题】：Changing HTML with spans and symbols in Javascript [duplicate]

【发布时间】：2021-06-22 11:42:15

【问题描述】：

我有一些 html，当调用一个函数时，我想更改为使用 span 的 div 中的文本。这个想法是一种定制的警报。我正在尝试使用 .innerHTML，但我想要更改的内容既有引号又有跨度。有没有办法让我更新这个？

当前 HTML：

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

这显示了一个带有图片的框

“我需要更新这个代码并保留引用和 关键字！”

我目前的 javascript 是：

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = ""This <span class="keyWord">code</span> needs to change!"";

它不允许我添加额外的引号或 span 元素。

生成的文本应该是

“此代码需要更改！”

【问题讨论】：

Escape quotes in JavaScript 不正确。那是关于转义标记（属性）中的引号而不是转义要在字符串中使用的引号。

【参考方案1】：

方法 1 - 反斜杠转义

使用反斜杠 \ 字符转义 HTML 字符串中的双引号：

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

延伸阅读：String - JavaScript | MDN#Escape Notation

---

方法 2 - 使用模板字符串

通过将字符串封装在反引号字符中，将其声明为模板文字：

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = `"This <span class="keyWord">code</span> needs to change!"`;

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

延伸阅读：Template literals (Template strings) - JavaScript | MDN

---

方法 3 - 单引号 (') 封装

在这种特殊情况下，由于您没有在字符串中的任何位置使用单引号，您可以通过将 HTML 字符串封装在单引号字符中来简单地声明它。 请注意，如果由于某种原因您的文本更改为包含单引号，这将中断，这将迫使您按照方法 1 中的详细说明转义它们。

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = '"This <span class="keyWord">code</span> needs to change!"';

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

【讨论】：

所以你没有找到任何重复的？

【参考方案2】：

您需要像这样使用反斜杠 \ 来“转义”特殊字符（在您的情况下为双引号）

alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";