【发布时间】：2018-10-01 09:04:17
【问题描述】：
我想向 HTML 页面添加对 JavaScript 可见但对最终用户不可见的信息。我想让原始 HTML 页面尽可能简单。一种解决方案是使用非标准标签，例如<custom> ... </custom>
我知道official way of adding custom elements，但我的目的不是在屏幕上显示任何内容，因此使用CustomElementRegistry 似乎有点过头了。
这是我的用例。我正在为正在学习英语的人创建一个“辅助阅读器”网络应用程序。我的 JavaScript 代码将 <span> 元素添加到普通的 HTML 页面，其中包含对读者来说是新的单词。例如，JavaScript 代码会改变纯 HTML ...
<p>The word "thought" may be new to elementary learners.</p>
...到：
<p>The word "<span data-info="think">thought</span>" may be new to elementary learners.</p>
（span 的data-info 属性提供稍后使用的信息——当用户将鼠标悬停在单词上时——显示图像、定义和示例，但这在这里并不重要。）
文本来自非网络开发者的作者，并且在开始时根本不包含任何标记。我正在编写两种工具：一种是离线的，一种是在线的。离线工具将词汇表与学生在不同水平上应该知道的单词列表进行比较，并允许不精通技术的编辑器收集同一单词的不同变形（例如：loose|loses|lost|losing）出现在给定的文本中，因此它们可以被视为相同的词根。这会生成一系列学生可能想要了解更多的术语。每个术语都存储为可以转换为正则表达式的字符串。例如"los(?:e|es|t|ing)"。
在线网页将收到：
- 作者的原始文本
- 搜索词数组
- 有关使用哪些参考站点的更多信息。此信息将添加到封闭跨度的 data-info 属性中，但在这里并不重要。
在线代码将遍历数组，在原始文本中查找每个正则表达式（例如/thought|thinks?/）的匹配项，并将相同的跨度添加到它找到的所有匹配项。它还会在必要时添加<p> 标签。
但是，“想法”这个词既可以是动词也可以是名词：“昨天我以为……”（动词）或“昨天我有一个想法……”（名词）。在第二种情况下，我需要使用不同的正则表达式：/thoughts?/，以允许单数和复数形式。
但是，这两个正则表达式都会找到“思想”的匹配项，这是我需要解决的问题。
这就是“信息隐藏”的用武之地。一种解决方案是让我的离线工具像这样向原始文本添加标签...
昨天我想...昨天我有一个想法...
然后我可以为每种情况使用不同的正则表达式，并且不会发生冲突。
/<verb>(thought|thinks?)<\/verb>/
/<noun>(thoughts?)<\/noun>/
由于这些标签不会显示在浏览器中，它们可以保留在原处……或者可以吗？
这样使用非标准和未声明的标签有什么危险吗？
【问题讨论】：
-
你不能使用
display: none;css？也不要使用正则表达式解析 html。 -
在这种情况下，“不解析 html 正则表达式”的命令似乎过于热心了。 HTML 非常简单并且在我的控制之下。但是感谢提醒要小心。 johndcook.com/blog/2013/02/21/…
标签： javascript html tags