Question

我可以使用getElementsByTagName（）函数从网页中的元素中获取元素的集合。

我希望能够对javascript字符串变量的内容使用类似的函数，而不是DOM元素的内容。

我该怎么做？

修改

我可以通过动态创建元素来实现这一目标。

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>标记，但实际上，您只有两个按钮标记。

通过innerHTML注入DOM，您正在利用浏览器的内置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的原因，如您在示例中所示。

javascript字符串变量是否有getElementsByTagName（）函数？

4 个答案: