Есть ли функция getElementsByTagName () для строковых переменных javascript?

Question

Я могу использовать функцию getElementsByTagName (), чтобы получить коллекцию элементов из элемента на веб-странице.

Я бы хотел использовать аналогичную функцию для содержимого строковой переменной javascript вместо содержимого элемента DOM.

Как мне это сделать?

EDIT

Я могу сделать это, создав элемент на лету.

var myElement = new Element('div');
myElement.innerHTML = "<strong>hello</strong><em>there</em><strong>hot stuff</strong>";
var emCollection = myElement.getElementsByTagName('em');
alert(emCollection.length); // This gives 1

Но создание элемента на лету для удобства использования функции getElementsByTagName () просто кажется неправильным и не работает с элементами в Internet Explorer.

Answer 1

Введение строки в DOM, как вы показали, является самым простым и надежным способом сделать это. Если вы работаете со строкой, вам нужно будет принять во внимание все возможные сценарии побега, из-за которых выглядит как тег на самом деле не будет тегом.

Например, вы могли бы иметь

<button value="<em>"/>
<button value="</em>"/>

в вашей разметке - если вы рассматриваете ее как строку, вы можете подумать, что у вас есть тег <em>, но на самом деле у вас есть только два тега кнопки.

Внедряя в DOM через innerHTML, вы пользуетесь встроенным в браузер HTML-парсером, который чертовски быстр. Делать то же самое с помощью регулярных выражений было бы больно, и браузеры обычно не предоставляют DOM-подобную функциональность для поиска элементов в строках.

Еще одна вещь, которую вы можете попробовать, - это синтаксический анализ строки как XML, но я подозреваю, что это будет более хлопотно и медленнее, чем метод внедрения DOM.

Answer 2

function countTags(html, tagName) {
    var matches = html.match(new RegExp("<" + tagName + "[\\s>]", "ig"));
    return matches ? matches.length : 0;
}

alert(
    countTags(
        "<strong>hello</strong><em>there</em><strong>hot stuff</strong>",
        "em"
    )
); // 1

Answer 3

var domParser = new DOMParser();
var htmlString = "<strong>hello</strong><em>there</em><strong>hot stuff</strong>";
var docElement = domParser.parseFromString(htmlString, "text/html").documentElement;
var emCollection = docElement.getElementsByTagName("em");
for (var i = 0; i < emCollection.length; i++) {
    console.log(emCollection[i]);
}

Answer 4

HTML в строке ничего особенного. Это просто текст в строке. Это должно быть проанализировано в дереве, чтобы это было полезно. Вот почему вам нужно создать элемент, а затем вызвать getElementsByTagName, как показано в примере.