범위 또는 DocumentFragment를 문자열로 변환

Question

W3C 호환 브라우저에서 JavaScript Range Object의 html 문자열을 가져 오는 방법이 있습니까?

예를 들어, 우리는 다음과 같은 사용자가 선택 가정 해 봅시다 : Hello <b>World</b>
Range.toString() 방법을 사용하여 문자열로 "안녕하세요"를 얻을 수 있습니다.

(파이어 폭스, 그것은. 문서의 getSelection 방법을 사용하여도 가능합니다)하지만 내부 HTML을 얻을 수있는 방법을 찾을 수 없습니다.

일부 검색 후에 범위를 DocumentFragment 개체로 변환 할 수 있음을 발견했습니다.

그러나 DocumentFragments에는 innerHTML 속성이 없습니다 (적어도 Firefox에서는 Webkit 또는 Opera를 사용하지 않았습니다).
내게 이상한 것 : 선택한 항목에 액세스 할 수있는 방법이 있어야한다는 것이 분명해 보입니다.

documentFragment을 만들고 다른 요소에 문서 조각을 추가 한 다음 해당 요소의 innerHTML을 얻을 수 있다는 것을 알고 있습니다.
하지만이 방법은 내가 선택한 영역 내의 열려있는 태그를 자동으로 닫습니다.
게다가 문자열로 가져 오기 위해 DOM에 연결하는 것보다 확실한 "더 나은 방법"이 분명합니다.

그래서 Range 또는 DocFrag의 html 문자열을 얻는 방법은 무엇입니까?

Answer 1

아니요, 그게 유일한 방법입니다. 약 10 년 전의 DOM Level 2 스펙은 노드를 HTML 텍스트와 직렬화 및 비 직렬화한다는 점에서 거의 아무것도 없었습니다. 따라서 innerHTML과 같은 확장에 의존해야합니다.

의견에 대해서는 그

하지만 그 방법은 자동 내가 선택한 지역 내의 모든 열려있는 태그를 닫습니다.

... 어떻게 다른 방법으로 작동 될까요? DOM은 트리로 배열 된 노드로 구성됩니다. DOM에서 내용을 복사하면 다른 노드 트리 만 만들 수 있습니다. 요소 노드는 시작과 끝 태그에 의해 HTML로 구분됩니다. 종료 태그를 필요로하는 요소의 HTML 표현은 종료 태그를 가져야하며 그렇지 않으면 유효한 HTML이 아닙니다.

Answer 2

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

Answer 3

FWIW, JQuery와 방법 :

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