注释/标记 HTML 标记的任意片段
解决注释 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
从标记角度来看,唯一可行的解决方案是遵循智能解析器的示例。假设突出显示信息(或者更确切地说,原始突出显示跨段落的信息)仅在机器使用时需要,则可以附加 自定义数据属性 对这些单独的
mark
元素进行分组:此信息也可能与某些元素一起使用某种 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: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.