搜索部分类名,返回完整的类名

Question

想象一下:

页面A包含以下内容body:

<div class="overlay-homepage"><span></span></div>

第B页包含:

<div class="overlay-results"><span></span></div>

我可以使用这个脚本来识别它们是否包含一个覆盖类:

function() {
    var htmlString = $('body').html().toString();
    var index = htmlString.indexOf("div class=\"overlay-");
    if (index != -1)
        return("It works");
}

对于返回值,而不是"它的工作原理",如何让它拉入类名的其余部分,例如"叠加结果"或者如果需要整个div内容,例如" <div class="overlay-results"><span></span></div>"？

还有许多其他页面具有不同的'overlay-'类名称,因此我不想对每个页面进行一次搜索,因此这种"一刀切"的方法.

Answer 1

例如，您可以使用这个jQuery 选择器

overlay这将为您提供在其类名称中包含某处的元素。

$('div[class*=overlay]')

这将为您提供类名以 开头的元素overlay。

$('td[class^=overlay]')

这将为您提供类名以 结尾的元素overlay。

$('td[class$=overlay]')

编辑：

要在您的代码中使用它，您可以执行以下操作：

function() {
  var attr = $('div[class*=overlay]').attr('class');
  return(attr);
});

该函数查找类名中带有覆盖的元素，并返回完整的类名。

Answer 2

您可以使用正则表达式并像这样重写它：

function() {
  var htmlString = $('body').html().toString();
  var matches = htmlString.match(/class="(overlay-[^\s"]*)/);
  if (matches.length)
    return(matches[1]);
}