javascript - 将 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> 标记将被视为不存在)。使用 block 元素包装器，例如通过添加不存在的中断来引入类似的问题。我似乎无法找到一种方法来声明一个 DOM 组，它可以像父对象中的纯文本一样简单地工作。

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

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

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

Answer 1

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

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

我不一定说这是最好的答案，但这是我迄今为止看到的最好的答案。