如何正确转义<option>标签内的文本？

Question

在将不受信任的文本插入HTML文档时，必须转义某些特殊字符（例如<、&、"等）。对于带引号的属性，需要使用(")。例如：

<div>Some tags are <b> and <div></div>

变成：

<div>Some tags are &lt;b&gt; and &lt;div&gt;</div>

有人可以争辩是否需要使用 &gt;，但这与本文内容无关。

这很棒，但是放在 option 标签内部怎么办？如果我想让文本显示为 "</option>"，该如何处理？

以下方法不可行：

<option>&lt;&sol;option&gt;</option>

我发现HTML字符实体（&lt;，&gt;等）被省略了。我已经尝试过Chrome和Firefox浏览器，我认为这与选项标签不能包含嵌套标签有关。对此谷歌搜索也没有帮助。

还有一个相关的问题：由于具有上述特殊转义行为，我们知道

- Dave

---

你想要创建像 <option></option></option> 这样的选项吗？那是无效的HTML。 - Mamdouh Saeed

Answer 1

如果我正确理解您的问题，如下代码片段所示，您可以在<option>标签内部完全正常地转义HTML实体（在Firefox、Chrome和Safari上测试过）。

因此，您可以在选项标记中使用文本</option>。这是通过表示<和>字符的HTML实体来完成的。

本质上，这与以下内容相同：

<option></option></option>

尽管中间的</option>并不被视为闭合标签，但在浏览器中它会以那种方式显示。

顺带一提，在使用<option>标记转义字符时，唯一的限制在于:before和:after CSS伪元素。W3建议您不能使用这些伪元素在<option>标记之前/之后添加内容。尽管出于某种原因，在Firefox 48中，这确实可以工作。

#css-option:before {
  content: "any text";
}

<select>
  <option>&lt;/option&gt;</option>
  <option>&#60;/option&#62;</option>
  <option>&lt;&sol;option&gt;</option>
  <option id="css-option"></option>
</select>

- Luka Kerr

---

那对我起作用了。我肯定在其他地方有一个错误，它以某种方式对我造成了这种麻烦。也许这意味着我应该休息一下，今晚好好睡觉。 :) - Dave