Javascript 搜索标签并获取它的innerHTML

Question

这可能很简单，但我只是在学习。

有一个页面上有 3 个块引用标签，我需要获取包含特定字符串的页面的 innerHTML。我不知道如何搜索/匹配字符串并获取包含匹配结果的标签的innerHTML。

任何帮助将不胜感激！

Answer 1

var searchString = 'The stuff in innerHTML';
var elements = document.getElementsByTagName('blockquote')
for (var i = 0; i < elements.length; i++) {
     if (elements[i].innerHTML.indexOf(searchString) !== -1) {
         alert('Match');
         break;
     }
}

:)

顺便说一句，如果你使用 Prorotype JS （顺便说一句，这比 jQuery 好得多），会有一个更好的方法)：

var el = $('blockquote').find(function(el) {
    return el.innerHTML.indexOf('The string you are looking for.') !== -1;
});

您当然也可以使用正则表达式来查找字符串，这可能更有用（使用 el.match() ）。

Answer 2

如果您需要搜索页面上的每个

，请尝试以下操作：

function findBlockquoteContainingHtml(matchString) {
    var blockquoteElements = document.getElementsByTagName('BLOCKQUOTE');
    var i;
    for (i = 0; i < blockquoteElements.length; i++) {
        if (blockquoteElements[i].innerHTML.indexOf(matchString) >= 0) {
            return blockquoteElements[i].innerHTML;
        }
    }
    return null;
}

Answer 3

为 blockquote 元素分配一个 id，然后你可以得到如下的 insideHTML：

HTML:

<blockquote id="bq1">Foo</blockquote>

JS:

var quote1 = document.getElementById('bq1').innerHTML;

Answer 4

使用 innerHTML 搜索标记内的文本时要小心，因为它也可能搜索属性或标记中的文本。

您可以使用以下方法找到所有 blockquote 元素：

var elems = document.getElementsByTagName("blockquote")

然后您可以查看它们的 innerHTML，但我建议您查看它们的 textContent/innerText （遗憾的是，这似乎在浏览器中没有标准化）：

for (i in elems) {
  var text = elems[i].textContent || elems[i].innerText;
  if (text.match(/foo/)) {
    alert(elems[i].innerHTML);
  }
}