注释/标记 HTML 标记的任意片段

发布于 2024-11-19 11:49:42 字数 808 浏览 3 评论 0原文

解决注释 HTML 标记和在标记本身中存储标记的问题, 元素是一个暂定的解决方案。内联标记:

<p>The fox <mark>jumped over</mark> the lazy dog.</p>

我想将这个想法扩展到标记(突出显示)文档中的任意文本片段。不幸的是,遵循这种跨段落标记的方法会生成无效的 HTML( 需要短语内容)并可能破坏 DOM 层次结构:

<mark><p>Red Green Blue.</p> <p>Magenta, Cyan,</mark> Black</p>

尽管智能解析器可能会将上述内容转换为:

<p><mark>Red Green Blue.</mark></p> <p><mark>Magenta, Cyan,</mark> Black</p>

它没有保留一个事实:有一个标记跨越一个段落和第二个段落的片段,而不是两个标记!

在不破坏 DOM 层次结构的情况下,最好的、可能的语义方法是什么?我寻求通过 DOM/JS API 查询这些数据。

Tackling the problem of annotating HTML markup and storing marks in the markup itself, the <mark> element came across as a tentative solution. Marking inline:

<p>The fox <mark>jumped over</mark> the lazy dog.</p>

I want to extend this idea towards marking (highlighting) arbitrary pieces of text in the document. Unfortunately, following this approach to mark, say, across paragraphs, would generate invalid HTML (<mark> expects phrasing content) and possibly break the DOM hierarchy:

<mark><p>Red Green Blue.</p> <p>Magenta, Cyan,</mark> Black</p>

Although a smart parser might translate the above into:

<p><mark>Red Green Blue.</mark></p> <p><mark>Magenta, Cyan,</mark> Black</p>

it doesn't preserve the fact there was a single mark spanning a paragraph and a fragment of a second paragraph, not two marks!

What is the best, possibly semantic way of doing this without breaking the DOM hierarchy? I seek to query this data through DOM/JS APIs.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

苏大泽ㄣ 2024-11-26 11:49:42

从标记角度来看,唯一可行的解​​决方案是遵循智能解析器的示例。假设突出显示信息(或者更确切地说,原始突出显示跨段落的信息)仅在机器使用时需要,则可以附加 自定义数据属性 对这些单独的 mark 元素进行分组:

<p><mark data-mark-group="1">Red Green Blue.</mark></p> <p><mark data-mark-group="1">Magenta, Cyan,</mark> Black</p>

此信息也可能与某些元素一起使用某种 JS 来指示亮点段落的风格也很好,但我将把它作为练习留给读者。

The only viable solution, markup-wise, is to follow the example of your smart parser. Assuming the highlighting information (or rather, the information that the original highlight spanned across paragraphs) is only required for machine use, one can then append a custom data attribute grouping these separate mark elements:

<p><mark data-mark-group="1">Red Green Blue.</mark></p> <p><mark data-mark-group="1">Magenta, Cyan,</mark> Black</p>

This information could also potentially be used with some sort of JS to indicate highlights across paragraphs in style as well, but I'll leave that as an exercise to the reader.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文