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

Question

我目前想知道在不更改流规则的情况下将动态格式应用于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组，它可以像在父对象中的纯文本那样简单地表现。

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

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

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

Answer 1

在看了这么久之后，我想出的最好的方法就是只为文本节点使用span包装器，同时破坏了spans的默认CSS格式。这有它的缺点，但幸运的是人们常常只留下基本的跨栏课程。

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

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