标记完美融入标记的单词并保持标记有效

Posted 2023-03-06

【中文标题】标记完美融入标记的单词并保持标记有效

【英文标题】：Mark words that blend in to the mark up perfectly and keep mark up valid

【发布时间】：2013-01-01 06:08:48

【问题描述】：

有没有办法以某种方式标记文本中的几个单词，仅用于进一步的程序处理，而不是用于任何可视化的东西？假设我有以下文字：

Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在 vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet。

假设gubergren 是我的关键字。我不能只解析 gubergren 的文本，因为我不知道我的关键字的值。我可以做的是在渲染时用标记标记我的关键字：

Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在 vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd <span class="keyword">gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet。

现在我可以轻松地解析 span 元素的文本，并将 keyword 作为类名，并且我可以获取我的关键字列表。但是如果span 与 CSS 样式相关联呢？这在浏览器中看起来很傻。另一方面，我不能只发明一个自己的标签，因为我绝对希望我的网站保持 html 有效。

你有什么建议？

【参考方案1】：

您的方法是正确的。使用带有“关键字”类的跨度标签。您不必担心 css 问题，尤其是如果您是编写 css 的人。不要为“关键字”类设置样式。

如果您不编写 CSS，我无法想象为什么有人会在没有附加类选择器的情况下设置简单标签样式的 好 原因。这样做有可能破坏很多事情。如果您担心“关键字”类附加了 css，请使类名具有唯一性。

如果您的其他人正在为没有类选择器的标签设置样式，请定义您自己的样式，以摆脱专门为具有“关键字”类的跨度标签的格式。

span.keyword 
   border: 0px;
   display: inline;
   background-color: transparent;
   ... whatever other formatting you may need to remove...

【讨论】：

感谢您的意见。尽管您无法想象设置 span 元素样式的充分理由，但我不能指望其他人也有同样的想法。

“因为我绝对希望我的网站保持 HTML 有效。”听起来像是你的网站？因此，您可以控制这一点。不要为没有类选择器的 标记设置样式，这不会成为问题。如果您正在使用一些第三方脚本或带有样式表的东西，这些样式表是样式 标记而没有分配类。别。他们不应该那样做。

这是行不通的。你不能指望每个人都会遵循你的期望。

1) 这就是为什么我问它是否是您帖子中所说的“您的”网站。如果是这样，那么您可以控制它。你不需要担心别人。你在发号施令。其他人和你一起工作。告诉他们不要在没有类选择器的情况下设置 标签的样式。这就是所谓的协作。

2) 如果我正在创建一个网站，并且想要使用一些 3rd 方脚本/css/等，我希望它们不会干扰/破坏我网站的其余部分。我认为我们可以同意这是一个非常标准的期望。遗嘱编写的第 3 方模块不会破坏您的网站。在没有其他选择器的情况下设计 标记是破坏站点的一种非常可靠的方法。因此，这是一个相当安全的期望。如果他们的第三方模块因此而破坏了您的网站，则意味着他们的代码编写得不好，您应该首先认真重新考虑使用它。

【参考方案2】：

我不确定文本来自哪里。在我们的 CMS 中，我们使用 ||对于特殊代码。所以我会在我的副本中：

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore ||keyword|| magna aliquyam erat, sed diam voluptua. At vero

因为 ||很少用于其他任何事情，然后我解析我的数据服务器端寻找||。我将使用各种中间功能来获取我需要的数据并根据需要更改副本。在单词周围添加 html 元素，将单词替换为要处理的表单或其他服务器端代码。功能无穷无尽。

【讨论】：

感谢您的意见。您的解决方案会完全弄乱句子的语法。即使您可能将|| 替换为任何可读的内容，|| 仍将被硬编码在文档中。

嗯，我们的数据存储在数据库中。所以我们没有每个说的文件。它可能不适合您的需求。您的帖子提到它不是用于样式，而是用于处理，所以我认为此内容位于数据库或类似的东西中。这是 Wordpress 插件经常使用的路线，并且对我们有用，因此我仍然不允许在我们的 WYSIWYG 中使用服务器端代码，但我可以允许访问我选择公开的某些功能。

【参考方案3】：

关键字周围有 2 个不可见元素怎么样？

例子：

<span style="display: none;">&nbsp;</span>gubergren<span style="display: none;">&nbsp;</span>

您可以检索跨度并获取两个跨度之间的内容。但我觉得这不是一个很好的解决方案。

最好的解决方案是不要将 css 应用于具有特定类的 span。不过我猜你已经知道了。

您还可以使用简单的 html 属性。示例：

<p data-keyword="gubergren">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

【讨论】：

这对span 元素的假定样式没有帮助，这就是这里的问题。并且使用每个 p 元素的属性不会将单词转换为元素。

其实这是一个非常有趣的方法。我的wrapper element' would have my custom CSS class anyway. And in this class I could specify position：绝对；顶部：-999px；左：-999px`。我的额外标记根本不可见，也不会影响关键字的样式。