Aralığı veya DocumentFragmenti dizeye dönüştürme

Question

W3C uyumlu tarayıcılarda JavaScript Range Object'in html dizesini almanın bir yolu var mı?

Örneğin, bize Aşağıdaki kullanıcı seçer diyelim: Hello <b>World</b>
O Range.toString() yöntemi kullanarak bir dize olarak "Hello World" almak mümkündür.

(Firefox'ta, o. belgesini 'ın getSelection yöntemini kullanarak da mümkündür) Ama iç HTML almak için bir yol bulmak gibi olamaz.

Bazı aramalardan sonra, aralığın DocumentFragment Nesnesine dönüştürülebildiğini buldum.

Ancak DocumentFragments hiçbir innerHTML özelliğine sahip değildir (en azından Firefox; Webkit veya Opera'yı denemediniz).
Bu benim için garip görünüyor: Seçilen öğelere erişmenin bir yolu olması gerektiği aşikar gibi görünüyor.

Bir documentFragment oluşturabildiğimi, belge parçasını başka bir öğeye ekleyebileceğimizi ve bu öğenin innerHTML numarasını aldığımı anlıyorum.
Ancak bu yöntem, seçtiğiniz alan içindeki açık etiketleri otomatik olarak kapatacaktır. Bunun yanında, bir dize olarak elde etmek için dom'a takmaktan daha bariz bir “daha ​​iyi yol” var elbette.

Peki, bir Range veya DocFrag html dizesinin nasıl elde edilir?

Answer 1

Hayır, bunu yapmanın tek yolu budur. Yaklaşık 10 yıl öncesine ait DOM Seviye 2'nin özellikleri, düğümleri HTML metnine serileştirme ve serileştirme açısından neredeyse hiçbir şey içermediğinden, innerHTML gibi uzantılara güvenmek zorunda kaldınız.

Yorumunuzu İlişkin o

Ama bu yöntem oto Seçtiğim alanı içinde herhangi açık etiketleri kapanacak.

... başka nasıl çalışır? DOM bir ağaçta düzenlenmiş düğümlerden oluşur. DOM'dan içerik kopyalamak yalnızca başka bir düğüm ağacı oluşturabilir. Öğe düğümleri, bir başlangıç ​​ve bazen bir bitiş etiketi ile HTML'de sınırlandırılır. Bir bitiş etiketi gerektiren bir öğenin HTML temsili bir uç etiketine sahip olmalıdır, aksi halde geçerli bir HTML değildir.

Answer 2

here bir örnek telaffuz için:

//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>' 

Answer 3

FWIW jQuery yolu:

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