在 Javascript 或 jQuery 中，如何检测特定标签是否存在？答案

【问题标题】：In Javascript or jQuery, how do I detect if a specific tag exists or not?在 Javascript 或 jQuery 中，如何检测特定标签是否存在？
【发布时间】：2010-01-19 18:43:34
【问题描述】：

给定以下字符串：

htmlStr1 = "<img>test1</img>";
htmlStr2 = "<div>test2</div>";

我想知道是否有办法编写一个函数来检测“img”标签（例如）。因此，如果将这两个字符串都传递给它，并且如果将第二个字符串传递给它，它就不应该做任何事情。

例如，您将运行如下函数：

result1 = checkIfTagExists(htmlStr1, "img");
result2 = checkIfTagExists(htmlStr2, "img");
alert(result1); // should output "true" or "1" or whatever
alert(result2); // should output "false" or do nothing

【问题讨论】：

标签： javascript jquery html tags

【解决方案1】：

我会为此使用一个快速的正则表达式，不需要时不需要使用任何 jQuery 选择器。

function checkIfTagExists(str, tag) {
    return new RegExp('<'+tag+'[^>]*>','g').test(str);
}

【讨论】：

【解决方案2】：

如果这更多是您正在寻找的功能示例，而不是您要使用它的确切情况，那么 jQuery has 选择器可能会有所帮助。

相关question 示例。

对于这种情况，你会这样做：

var str1ContainsImg = $(htmlStr1 + ":has(img)").length > 1;
var str2ContainsImg = $(htmlStr2 + ":has(img)").length > 1;

编辑：正如 tvanfosson 在 cmets 中指出的那样，如果您的 img 标签没有结束标签 (<img src='' />)，那么这个确切的解决方案将不起作用。如果这是一个问题，您可以检查返回的第一个元素的标签名称，如下所示：

var htmlStr3 = "<img src='' />";
var containsEmptyImg = $(htmlStr3 + ":has(img)").length > 1 || 
    $(htmlStr3 + ":has(img)")[0].tagName.toUpperCase() == 'IMG';

【讨论】：

是的！这正是我想要的:) 谢谢！
jQuery 在幕后做了一些复杂的工作。仅供参考，如果您在没有 jQuery 帮助的情况下实现这样的解决方案，请使用文档对象模型。它为您提供了一个面向对象的界面来执行此操作，而不是使用文本操作。
这不适用于 XHTML 图像标签，但是：的长度正好等于 1。

【解决方案3】：

将其包装在 if 语句中，您就可以开始了

jQuery(jQuery(htmlStr1)).find('img').size() > 0

【讨论】：

【解决方案4】：

如果字符串在元素的innerHTML 中，这将更容易：

function checkIfTagExists(element, tagName) {
    return element.getElementsByTagName(tagName).length > 0;
}

正则表达式检查可能不够（请参阅RegEx match open tags except XHTML self-contained tags）:)

如果你真的只有字符串，你可以从字符串创建一个元素，并将 innerHTML 设置为字符串，然后对那个新元素进行上述检查。这就是$(tagName, htmlContext) 要做的事情。

【讨论】：

【解决方案5】：

这可能会有一些开销，但它应该足够健壮，可以用于任何给定的字符串或任何元素的 innerHTML。

function getTagCountFromString(string, tag) {
    var count = 0;
    tag = tag.toLowerCase();
    $(string).each(function(idx, el){
        if(el.nodeType === 1) {
           if(el.tagName && el.tagName.toLowerCase() === tag) {
               count++;
           }
           if(el.childNodes.length > 0) {
               try {
                   count += getTagCountFromString(el.innerHTML, tag);        
               } catch (ex) { }
           }
        }
    });
    return count;
}

getTagCountFromString('<img src=""/><a href=""/>', 'img'); //returns 1

然后要获得一个布尔值，您可以检查计数是否不等于 0，或者创建一个辅助函数来为您完成。

【讨论】：

【解决方案6】：

直接用javascript：

function checkIfTagExists(src, tag) {
    var re = "<"+tag + ">\.+<\\/"+tag+">";
    return new RegExp(re).test(src);
}

【讨论】：

很好的解决方案。但是为什么要警惕呢？