代码之家 › 专栏 › 技术社区 › adolfojp

javascript字符串变量是否有类似getElementsByTagName()的函数?

string javascript

adolfojp · 技术社区 · 16 年前

我可以使用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中的元素。

4 回复 | 直到 16 年前

levik 16 年前

如您所示,将字符串注入DOM是最简单、最可靠的方法。如果对字符串进行操作,则必须考虑所有可能的转义情况,这些转义情况会使看就像一个标签不是真的是标签。

例如,你可以

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

在你的标记中——如果你把它当作一个字符串,你可能会认为你有一个 <em> 标签,但实际上,你只有两个按钮标签。

通过向DOM中注入 innerHTML 你正在利用浏览器内置的HTML解析器,它非常快。通过正则表达式执行同样的操作会很痛苦,而且浏览器通常不提供类似DOM的功能来查找字符串中的元素。

您可以尝试的另一件事是将字符串解析为XML,但我怀疑这将比DOM注入方法更麻烦、更慢。

nickf 16 年前

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

Marco Lackovic 7 年前

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]);
}