Разделяет ли jQuery некоторые элементы html из строки при использовании .html()?

У меня есть var, который содержит полную html-страницу, включая head, html, body и т.д. Когда я передаю эту строку в .html(), jQuery удаляет все эти элементы, такие как body, html, голова и т.д., которые я не хочу.

Мои данные var содержат:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Тогда мой jQuery:

// data is a full html document string
data = $('<div/>').html(data);
// jQuery stips my document string!
alert(data.find('head').html());

Мне нужно манипулировать полной строкой html-страницы, чтобы я мог вернуть то, что находится в элементе. Я хотел бы сделать это с помощью jQuery, но, похоже, все методы, append(), prepend() и html() все пытаются преобразовать строку в элементы dom, которые удаляют все остальные части полной html-страницы.

Есть ли другой способ, которым я мог бы это сделать? Я был бы в порядке, используя другой метод. Моя конечная цель - найти определенные элементы внутри моей строки, поэтому я решил, что jQuery будет лучше, поскольку я так привык к этому. Но, если он собирается обрезать и удалить части моей строки, мне придется искать другой метод.

Идеи?

Ответы

Ответ 1

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

Как вы можете легко убедиться (DEMO http://jsbin.com/ocupa3)

var data = "<html><head><title>Untitled Document</title></head><body><p>test</p></body></html>";
data = $('<div/>').html(data);
alert(data.html());

дает разные результаты в разных браузерах

Opera 10.10

<HEAD><TITLE>Untitled Document</TITLE></HEAD><P>test</P>

FF 3.6

<title>Untitled Document</title><p>test</p>

IE6

<P>test</P>

так что это не имеет никакого отношения к jQuery, это браузеры, которые разделяют некоторые теги, когда вы вставляете целую строку html внутри div. Но вам нужно пройти весь код jQuery для html(), чтобы быть уверенным. И вам нужно будет сделать это для всех браузеров, так как существует несколько разных способов, с помощью которых jQuery пытается выполнить эту работу.

Для решения я советую вам исследовать использование iframe (возможно, скрытое) и установить этот контент iframe в html-строку, которую вы имеете. Но имейте в виду, что возиться с iframe и изменять их контент программно - тоже непростая задача. Существуют также различные связанные с браузером причуды и вопросы времени.

Ответ 2

Вот решение, которое будет включать в себя тело, голову и другие атрибуты: mydoc = document.getElementById('NAME_OF_PREVIEW_FRAME'). contentWindow.document; mydoc.write(HTML_CODE); mydoc.close();

Ответ 3

Нет, функция jQuery html просто отправляет строку в свойство element innerHTML, которая является функцией браузера, которая сообщает ему анализировать HTML в DOM-элементы и добавлять их на страницу.

Ваш браузер не работает со страницей как данные HTML, он работает с ним как DOM и импортирует/экспортирует HTML.

JavaScript имеет очень хорошее Поддержка регулярных выражений. В зависимости от сложности вашей задачи вы можете найти, что это лучший способ обработки ваших данных.

Ответ 4

Нет необходимости в контейнере div.

Вы пробовали это?:

var foo = $(data);  // data is your full html document string

Затем вы можете искать внутри него так:

$('.someClass', foo); // foo is the document you created earlier

Update:

Как уже упоминалось, как это действует, он переходит в браузер.

Я немного посмотрел на jQuery docs и нашел это:

Когда HTML более сложный, чем единый тег без атрибутов, так как он в приведенном выше примере, фактический создание элементов обрабатывается браузера innerHTML. В частности, jQuery создает новый <div> и устанавливает innerHTMLсвойство элемента в HTML который был передан.

Итак, кажется, что когда вы используете целую html-doc как строку, это не отличается от установки свойства innerHTML div, которое вы используете с помощью createElement.