Javascript 搜索标签并获取它的 innerHTML答案

【问题标题】：Javascript search for tag and get it's innerHTMLJavascript 搜索标签并获取它的 innerHTML
【发布时间】：2010-12-31 04:27:15
【问题描述】：

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

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript search tags match innerhtml

【解决方案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()）。

【讨论】：

这只会匹配innerHTML与searchString完全一样的元素，这不是他想要的（如果你已经有了字符串，为什么还要搜索它）？
你只是在最后一个例子中返回真/假:)
嗯，不是吗？它应该返回匹配的元素。我刚刚测试了它；）。
"这比 jQuery btw 好得多" ...不要把它说成事实——它不是事实。
@watain: 哦，对不起，find 方法返回当前元素，如果你传递给它的函数返回 true。我的坏:)

【解决方案2】：

如果您需要搜索页面上的每个<blockquote>，请尝试以下操作：

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

【讨论】：

由于某种原因我无法让它工作（即使在替换了最后一个 } 之后）

【解决方案3】：

为blockquote元素分配一个id，然后你可以像这样得到innerHTML：

HTML：

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

JS：

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

【讨论】：

这不是我的页面，我无法分配 ID，但无论如何感谢您的回复！ :)

【解决方案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);
  }
}

【讨论】：