在保留 HTML 布局的同时将 HTML 文本内容拆分为组答案

【问题标题】：Splitting HTML Text Content into Groups while Preserving HTML Layout在保留 HTML 布局的同时将 HTML 文本内容拆分为组
【发布时间】：2013-10-08 19:22:07
【问题描述】：

我目前想知道在不更改流规则的情况下将动态格式应用于 HTML 页面中的内容的能力。从表面上看，这似乎很简单，因为您可以选择 DOM 的子集并批量应用。但是，如果您只想将该格式应用于特定对象的文本的一部分，这将不起作用。

例如格式化：

<div>Let's start my format here <span> and here </span> and <br> here too. <br> But not here.</div>

如果您想从格式中排除<br> But not here.，则对于任意布局的情况没有明确的方法可以做到这一点，即使您手动这样做也是如此。一种方法是将 div 分解为 span 部分，然后以不同的方式格式化它们。不幸的是，将任意 HTML 包装在内联元素中会导致一些不幸的副作用（例如，跨度中的任何 <br> 标记都将被视为不存在）。使用块元素包装器，就像通过添加不存在的中断来引入类似的问题。我似乎找不到一种方法来声明一个 DOM 组，它可以像父对象中的纯文本一样简单地表现出来。

那么，我试图找出一个很好的通用解决方法来引入显示级格式，同时保留任何布局格式。这种格式可以包括文本格式（例如，突出显示、强调）或动态效果（例如，隐藏/显示）。我可以想到一些假设的解决方案，但我不确定在实践中实际上有什么（如果有的话）：

现有的内联布局元素（如 span）不会终止您的换行符和其他格式请求。
使用 CSS 制作自定义元素（例如 #1）的能力。也许磨合或继承显示标签可能对此有用？ (https://developer.mozilla.org/en-US/docs/Web/CSS/display) 然而，他们似乎都没有解决这个问题。
一种防止跨度破坏其内部格式标记的方法。
作为布局格式传递的分组元素（即，在布局方面被视为未标记的文本）但允许显示格式。

人们会认为这将是一件简单的事情。毕竟，不难想象想要将一个 div 分成两个不同的部分，它们的文本格式略有不同，同时保留它们的布局格式。但是，我似乎找不到适合这项工作的工具。

【问题讨论】：

上下文是什么？这是您希望能够对自己的页面或其他页面执行的操作吗？无论如何，这对我来说听起来一点都不简单。
上下文是用于注释目的。因此 HTML 源代码将在手边，但我会尝试保留预先存在的页面结构。在大多数情况下，将文本段包装到 span 元素中的方法效果很好。不幸的是，span 破坏了其中的某些 HTML 标记，尤其是换行符。
好吧，你永远不知道什么时候会有一个 CSS 规则对页面上某些上下文中的 <span> 标记做任何事情。
当然。但这很容易解决，只需制作一个类似于“默认”跨度的自定义元素，但名称如此荒谬，没有人会使用它。
更基本的问题是，如果我只想设置外观/感觉效果，我似乎找不到一个似乎不打算以某种方式破坏布局的 HTML 元素.

标签： javascript html css layout formatting

【解决方案1】：

看了很长一段时间后，我想到的最好的方法是对文本节点仅使用span 包装器，同时破坏span 的默认CSS 格式。这有其缺点，但值得庆幸的是，人们经常不理会基本跨度类。

但是，进一步考虑，我认为最好的解决方案实际上是使用webcomponents.js 创建一种新的跨度类型，然后使该跨度类型始终继承父格式。特别是如果该跨度类型有一个非常随意的名称（例如，<span-(some guid)/>），这应该足以防止任何意外冲突的机会。我还发现，通过仅包装文本节点，不会丢失换行符或其他格式，因为这些元素永远不会存在于文本节点中。

我不一定说这是最好的答案，但它是我迄今为止见过的最好的答案。

【讨论】：