将范围或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转换为字符串

回答

相关问题