草庐IT

javascript - 为什么我的函数无法返回具有特定文本内容的元素？

coder 2024-07-23 原文

我有一个函数，matchTagAndText，顾名思义，它接受 2 个参数，一个选择器和一个文本，并检查是否有任何匹配的元素具有给定的文本。它是这样的:

function matchTagAndText(sel, txt) {
    var elements = document.querySelectorAll(sel);
    return Array.prototype.filter.call(elements, function(element){
        return RegExp(txt,'i').test(element.textContent);
    });
}

现在我试图选择一个 td 元素，其中包含文本“Lorem ipsum”，但我无法这样做。

我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frames</title>
</head>
<body>
    <td colspan="2" class="font-description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nulla iste, quae necessitatibus. Impedit mollitia delectus eum voluptas ullam! Perspiciatis in dolorem blanditiis dolores mollitia sint nostrum sunt veniam est!
    </td>
</body>
</html>

我尝试在控制台中定义函数后调用该函数:

var el = matchTagAndText('td.font-description','Lorem ipsum');

但这会返回一个空数组。我的功能有什么问题？

实例:

function matchTagAndText(sel, txt) {
    var elements = document.querySelectorAll(sel);
    return Array.prototype.filter.call(elements, function(element){
        return RegExp(txt,'i').test(element.textContent);
    });
} 

var el = matchTagAndText('td.font-description','Lorem ipsum');
console.log(el);
<td colspan="2" class="font-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nulla iste, quae necessitatibus. Impedit mollitia delectus eum voluptas ullam! Perspiciatis in dolorem blanditiis dolores mollitia sint nostrum sunt veniam est!
</td>

最佳答案

有趣的是，问题是您的标记无效:您的 td 周围没有 tr 或 table。如果你解决了这个问题，它就会起作用:

function matchTagAndText(sel, txt) {
    var elements = document.querySelectorAll(sel);
    return Array.prototype.filter.call(elements, function(element){
        return RegExp(txt,'i').test(element.textContent);
    });
} 

var el = matchTagAndText('td.font-description','Lorem ipsum');
console.log(el);
<table>
  <tr>
    <td colspan="2" class="font-description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nulla iste, quae necessitatibus. Impedit mollitia delectus eum voluptas ullam! Perspiciatis in dolorem blanditiis dolores mollitia sint nostrum sunt veniam est!
    </td>
  </tr>
</table>

如果我们使用 Chrome 的开发工具检查您的示例，我们可以看到，在它试图使 HTML 有效的过程中，它只是完全剥离了您的 td 标签及其关联的 class，所以你的选择器不匹配任何东西:

关于javascript - 为什么我的函数无法返回具有特定文本内容的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49550334/

javascript为什么codesectionmatchTagAndTextarraysdom

有关javascript - 为什么我的函数无法返回具有特定文本内容的元素？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  4. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  6. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  7. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  8. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  9. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  10. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

随机推荐