如何在使用 javascript 的一些文本之后查找元素？答案

【问题标题】：how to find element after some text with javascript?如何在使用 javascript 的一些文本之后查找元素？
【发布时间】：2011-03-13 18:12:40
【问题描述】：

我有一个 HTML 文件，里面有一些文本（如 'bla-bla'）。我想在这个文本节点之后得到一个特定的元素（比如<a href=...）。

如何使用纯 JavaScript 或 jQuery 做到这一点？

示例 HTML：

<div>
  jdlgjalfad dfaldfdalf bla-bla fdfadf afd <br/> 
  <table>...
    <td></td>
  </table>
  <a href="some_link">here</a>
</div>

【问题讨论】：

请发布您的 HTML 的 sn-p。当您如此不具体时，很难发布一个好的答案。
哪个特定节点？只是下一个节点？你想要一些具体的而不提供适当的例子。
请看我的例子

标签： javascript jquery

【解决方案1】：

$('div:contains('bla-bla')).find('a')

适用于您的示例，但可能不适用于您的实际用例。 :contains 选择器会找到一个包含一些字符串的 div，但如果您需要更多上下文，您可能需要使用正则表达式来查找您想要的特定文本：

$('div').each(function(){
  if (/funky-regex/.test($(this).text())) {
    $(this).find('a').doSomethingHere();
  }
});

用一个或多个 jquery 方法替换 doSomethingHere()。适当的选择取决于您的具体用例。

【讨论】：

【解决方案2】：

您可以使用contains 查找包含所选文本的元素，然后遍历每个元素，将文本替换为基于您的搜索字符串的替换内容。请注意，即使元素后代包含文本， contains 也会返回匹配项，因此如果您有嵌套元素或根据元素是否具有内部元素进行过滤，您可能应该指定一些元素类型。

$('div:contains("bla-bla")').each( function() {
   var txt = $(this).text();
   var insert = 'bla-bla<a href="...">(link)</a>';
   $(this).text( txt.replace( /bla-bla/g, insert ) );
});

或

$(':contains("bla-bla")')
    .filter( function() { return $(this).children().length == 0; } )
    .each( function() {
       var txt = $(this).text();
       var insert = 'bla-bla<a href="...">(link)</a>';
       $(this).text( txt.replace( /bla-bla/g, insert ) );
});

【讨论】：