javascript - 使用 javascript/jquery 应用上标/下标标记

Question

我正在显示来自 MySQL 数据库的文本，其中包含类似“测量痕量气体 CH4、N2O 和 CO2 以及控制其生产和排放的过程”的文本。文本通过文本区域保存。当文本显示在 HTML Doc 中时，我想使用 javascript/jquery 将上标/下标应用于 CH4、N20 和 CO2？请让我知道这是否可能？

Answer 1

最简单的方法是处理数据，以便将数字放置在sub标记内，例如 CH4 变为CH<sub>4</sub>。然而，这会产生印刷不良的结果（包括不均匀的行距），所以我建议生成 CH<span class=sub>4</span>和使用 CSS 规则

.sub {
  vertical-align: 0;
  position: relative;
  top: 0.8ex; 
  font-size: 80%;
}

当然，可以调整使用的值，这可能取决于字体。

其他选项包括使用下标字符（如@TachyonVortex 的回答中所建议的那样）和使用 OpenType 功能进行下标font-feature-settings（有限的浏览器支持，有限的字体支持）。

Answer 2

您可以使用 Unicode 中的下标数字字符：CH₄、N₂O、CO₂。

• Unicode 字符 'SUBSCRIPT FOUR' (U+2084)
• Unicode 字符“订阅二” (U+2082)

您可以编写一个正则表达式来匹配化学式（例如：CH4）并使用下标数字字符（CH₄）重新格式化它们。

你有两个选择：

1. 将文本存储<textarea>在数据库中，无需重新格式化。然后，当您呈现 HTML 页面时，添加下标数字，无论是服务器端（例如：PHP）还是客户端（例如：JavaScript）。
2. 在将文本写入数据库之前重新格式化文本。

添加下标数字后，您需要确保从那时起使用 UTF-8 字符集，以避免损坏字符。