2011-02-04 2 views
12

Есть ли способ получить строку html объекта диапазона JavaScript в браузерах, совместимых с W3C?Преобразование диапазона или DocumentFragment в строку

Например, допустим, пользователь выбирает следующее: Hello <b>World</b>
можно получить «Hello World» в виде строки, используя метод Range.toString(). (В Firefox можно также с помощью документа «s getSelection метода.)

Но я не могу найти способ, чтобы получить внутренний HTML.

После некоторого поиска я обнаружил, что диапазон может быть преобразован в объект DocumentFragment.

Но DocumentFragments не имеет innerHTML (по крайней мере, в Firefox, не пробовал Webkit или Opera).
Что кажется странным для меня: казалось бы, есть какой-то способ доступа к выбранным предметам.

Я понимаю, что могу создать documentFragment, добавить фрагмент документа к другому элементу, а затем получить innerHTML этого элемента.
Но этот метод автоматически закрывает любые открытые теги в пределах области, которую я выбираю.
Кроме того, существует очевидный «лучший способ», чем прикрепление его к dom, чтобы получить его как строку.

Итак, как получить строку html диапазона или DocFrag?

ответ

3

Нет, это единственный способ сделать это. Спецификации DOM Level 2 примерно с 10 лет назад практически не имели ничего общего с сериализацией и десериализацией узлов в HTML-тексте и из него, поэтому вам приходится полагаться на расширения, такие как innerHTML.

Что касается Вашего комментария, что

Но этот метод будет автоматически закрыть все открытые теги в области я выбираю.

... как еще это могло сработать? DOM состоит из узлов, расположенных в дереве. Копирование содержимого из DOM может только создать другое дерево узлов. Узлы элементов ограничены в HTML начальным и иногда конечным тегом. HTML-представление элемента, для которого требуется конечный тег, должен иметь конечный тег, иначе он недействителен HTML.

+0

Конечные теги создаются, когда диапазон превращается в фрагмент документа (ISN» t, что правильно?). Тем не менее, ** ** должно быть возможно узнать, что содержится в диапазоне до его преобразования в узлы, даже если диапазон содержит недопустимую разметку. – SamGoody

+4

Я не согласен. Когда анализируется недействительная разметка, браузер обрабатывает ее, но считает нужным и создает соответствующие узлы в DOM, который является собственным представлением браузера документа. Эта недействительная разметка, по существу, затем выбрасывается, по крайней мере, до того, как DOM (к чему имеет доступ JavaScript).Вам нужно перестать думать о DOM в терминах строки и начать думать об этом как о дереве. Конечные теги являются продуктом сериализации этого дерева для строки HTML (например, через 'innerHTML'). Они не существуют как сущности внутри дерева. –

4

Чтобы изложить пример из 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>' 
+1

Это подход, описанный в вопросе. OP хочет лучшего способа (чего, к сожалению, не существует). –

10

FWIW, путь JQuery:

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

 Смежные вопросы

  • Нет связанных вопросов^_^