Разобрать строку как не-XML HTML5 без загрузки дочерних элементов

Question

Существует несколько версий этого вопроса о SO, но ни одна из них не является основой того, что я пытаюсь сделать. Когда JavaScript включен, браузер видит содержимое элемента noscript как неразобранный текст. Я использую этот элемент для предоставления всего содержимого моего сайта, но для тех, у кого есть JavaScript, я загружаю содержимое с помощью AJAX.

… Но потом я подумал, зачем делать дополнительный запрос с AJAX, когда все содержимое находится в noscript? Вместо этого я попытаюсь извлечь нужные фрагменты из строки в элементе noscript. Сначала я попробовал это:

do_stuff_with($($("noscript").text()))

Но вскоре я обнаружил, что этот метод заставляет браузер немедленно отправлять запросы на все замененные элементы (изображения и т. Д.) В проанализированной строке. (Я предполагаю, что jQuery добавляет его в DOM для его анализа.) Затем я взглянул на $ .parseXML (), но быстро оставил эту идею, потому что разметка не является XML (это HTML5 в не-XML форме).

Можно ли как-нибудь выбрать элементы из строки без выполнения ненужных HTTP-запросов?

Answer 1

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

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

Кажется, теперь все так просто ...

Answer 2

Я считаю, что нет способа проанализировать HTML с помощью jQuery, не добавив его в DOM. Тем не менее, если вы хотите немного пошалить, вы можете избежать запроса нежелательных / ненужных ресурсов, изменив исходный код noscript перед его анализом.

HTML

<noscript>
  <span class="name">Mr. Smith</span>
  <img src="/images/02938/avatar.jpg" />
  <span class="age">27</span>
</noscript>

JQuery

// Load raw content, make sure it's wrapped in a single node
raw = '<div>' + $('noscript').text() + '</div>';

// "Fix" any elements that might reference external resources by
// turning them into invalid HTML tags.
raw = raw.replace(/img/g, 'cheese');

dom = $(raw);

// Now we can access our variables without unnecessary resource requests
name = dom.find('.name').text();
age = dom.find('.age').text();