Question

我有一个函数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＆＃39;在其中，但我无法这样做。

我的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');

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

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

有趣的是，问题在于您的标记无效：您td没有tr或table。如果你解决了这个问题，那就可以了：

＆＃13;

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

＆＃13;

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

＆＃13;

如果我们使用Chrome的devtools检查您的示例，我们可以看到，在尝试使HTML有效时，它只是完全剥离了您的td标记及其相关联的{{ 1}}，所以你的选择器不匹配任何东西：

Answer 2

你的代码很好，你的标记不是 - 一个TD应该存在于表格内的一行内。

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>
  <tbody>
    <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>
  </tbody>
</table>

Answer 3

我认为问题出在您的HTML上。您不能编写包含元素外部元素的HTML文档。浏览器根本不会构造这样的元素，并且在重新构建时你无法选择它。

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frames</title>
</head>
<body>
    <table>
      <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>
    </table>
</body>
</html>https://stackoverflow.com/questions/49550334/why-is-my-function-unable-to-return-elements-with-specific-text-content#

＆＃13;

Answer 4

HTML CODE中存在问题

首先 - 你可以在你的html代码中将TD更改为DIV

<body>
    <div 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!
    </div>
</body>

并在控制台中

matchTagAndText('div.font-description','Lorem ipsum');

第二 - 你可以用TABLE和TR

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

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

4 个答案: