在保留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分割爲跨度部分，然後以不同的格式對其進行格式化。不幸的是，在內聯元素中包裝任意HTML會導致一些不幸的副作用（例如，跨度中的任何<br>標記將被視爲不存在）。使用塊元素封裝，就像通過添加不存在的斷點來引入類似的問題。我似乎無法找到一種方法來聲明一個DOM組，它可以簡單地作爲父對象內的純文本行爲。

那麼，我試圖找出一個很好的通用解決方法來引入顯示級格式，同時保留任何佈局格式。這種格式化可以包括文本格式（例如，突出顯示，強調）或動態效果（例如，隱藏/顯示）。我能想到的幾個假設的解決方案，但我不知道什麼（如果有的話），實際上在實踐中是可行的：

1. 現有內嵌佈局元素像跨度不殺你的換行符和其他格式的請求。
2. 使用CSS製作自定義元素（如＃1）的能力。也許這個插入或繼承顯示標籤可能對此有用？ （https://developer.mozilla.org/en-US/docs/Web/CSS/display）但是，他們都不像他們解決這個問題。
3. 一種防止跨越格式化標記的跨度內部方法。
4. 一個分組元素，充當佈局格式的傳遞（即，爲了佈局目的而被視爲未標記的文本），但允許顯示格式。

有人會認爲這將是一個簡單的事情。畢竟，不難想象要將div分割爲兩個不同的文本格式稍有不同的部分，同時保留其佈局格式。但是，我似乎無法爲這項工作找到合適的工具。

Answer 1

看了這段時間之後，我想到的最好的結果是使用跨度包裝爲文本節點只有，伴隨着打破跨度的默認CSS格式。這有它的缺點，但是幸運的是，人們經常單獨離開基本的跨度課程。

但是，考慮到它，我認爲最好的解決方案實際上是使用webcomponents.js來創建一個新類型的跨度，然後使該跨度類型始終繼承父級格式。特別是如果該跨度類型具有非常任意的名稱（例如，<span-(some guid)/>），則應該足以防止意外衝突的發生。我還發現，通過僅包裝文本節點，不會丟失換行符或其他格式，因爲這些元素在文本節點中不可能存在。

我不一定說這是最好的答案，但它是迄今爲止我見過的最好的答案。