JQuery удаляет некоторые html-элементы из строки при использовании .html ()? - PullRequest
Новая
       6

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

17 голосов
/ 22 марта 2010

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

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

<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 будет лучше, так как я так привык к этому. Но, если он собирается обрезать и удалить части моей строки, мне придется искать другой метод.

Идеи

Ответы [ 4 ]

12 голосов
/ 22 марта 2010

После нескольких быстрых тестов мне кажется, что такое поведение вызвано не 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-у вас есть строка. Но имейте в виду, что возиться с iframes и изменить их содержимое программным способом тоже непросто. Также существуют различные причуды, связанные с браузером, и проблемы с синхронизацией.

4 голосов
/ 17 декабря 2012

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

2 голосов
/ 22 марта 2010

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

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

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

0 голосов
/ 22 марта 2010

Контейнер не нужен.

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

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

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

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

Обновление:

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...