將範圍或DocumentFragment轉換爲字符串

有沒有辦法在兼容W3C的瀏覽器中獲取JavaScript Range對象的html字符串？將範圍或DocumentFragment轉換爲字符串

例如，讓我們說，用戶選擇如下：Hello <b>World</b>
這是可能得到的「Hello World」作爲使用Range.toString()方法的字符串。（在Firefox中，還可以使用文檔的getSelection方法。）

，但我似乎無法找到一種方式來獲得的內部HTML。

經過一番搜索，我發現範圍可以轉換爲DocumentFragment對象。

但是DocumentFragments沒有innerHTML屬性（至少在Firefox中;還沒有試過Webkit或Opera）。
對我來說這似乎很奇怪：看起來很明顯，應該有一些方法來訪問選定的項目。

我意識到我可以創建一個documentFragment，將文檔片段追加到另一個元素，然後獲取該元素的innerHTML。
但是，該方法會自動關閉我選擇的區域內的任何打開的標籤。
除此之外，肯定有一個明顯的「更好的方法」，而不是將它附加到dom中，以便將它作爲一個字符串來獲取。

那麼，如何獲取Range或DocFrag的html字符串？

來源

2011-02-04 SamGoody

不，這是做到這一點的唯一方法。大約10年前的DOM Level 2規範幾乎沒有任何方法將節點序列化和反序列化到HTML文本中，所以你不得不依賴像innerHTML這樣的擴展。

關於你的評論說，

但這方法自動關閉我選擇的區域內的任何打開的標籤。

......它還能工作嗎？ DOM由排列在樹中的節點組成。複製DOM中的內容只能創建另一個節點樹。元素節點由HTML開始，有時結束標記分隔。需要結束標記的元素的HTML表示必須具有結束標記，否則它不是有效的HTML。

來源

2011-02-04 11:02:37

時的範圍被轉換爲一個文件片段（ISN」被創建的結束標記那是否正確？）。然而，即使範圍包含無效標記，它也應該有可能在轉換爲節點之前找出範圍內包含的內容。 – SamGoody 2011-02-06 08:14:55

我不同意。當解析無效標記時，瀏覽器會處理它，但它看起來合適，並在DOM中創建適當的節點，DOM是瀏覽器自己的文檔表示。這個無效的標記基本上被拋棄了，至少就DOM（這是JavaScript可以訪問的東西）而言。您需要停止以字符串的形式思考DOM，並開始將其視爲一棵樹。結束標記是將此樹序列化爲HTML字符串（例如，通過`innerHTML`）的產物。它們不作爲樹中的實體存在。 – 2011-02-06 12:46:34

要從here拼出一個例子：

//Example setup of a fragment 
var frag = document.createDocumentFragment(); //make your fragment 
var p = document.createElement('p'); //create <p>test</p> DOM node 
p.textContent = 'test'; 
frag.appendChild(p ); 

//Outputting the fragment content using a throwaway intermediary DOM element (div): 
var div = document.createElement('div'); 
div.appendChild(frag.cloneNode(true)); 
console.log(div.innerHTML); //output should be '<p>test</p>'

來源

2014-07-10 19:20:44 yuvilio

FWIW，jQuery的方式：

$('<div>').append(fragment).html()

來源

2014-07-17 18:18:21

將範圍或DocumentFragment轉換爲字符串

回答

相關問題