Question

我是一个自己学习并且用javascript搞乱的noobie，我偶然发现了那个叫做“正则表达式”的噩梦...我对它们有点了解并且我一直在做着花哨的东西，但是我被困住了，我希望你向我澄清一下：

我一直在阅读并寻找创建比赛的方法，我匆匆忙忙地回答：

How to perform a real time search and filter on a HTML table

/////////////////////////////////////////////// ////////////////////////////////////////////////// ////////////////////////////////////////////////// //////////////////

var $rows = $('#table tr');
$('#search').keyup(function() {

var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
    reg = RegExp(val, 'i'),
    text;

$rows.show().filter(function() {
    text = $(this).text().replace(/\s+/g, ' ');
    return !reg.test(text);
}).hide();

}）;

http://jsfiddle.net/dfsq/7BUmG/1133/

/////////////////////////////////////////////// ////////////////////////////////////////////////// ////////////////////////////////////////////////// //////////////////

我有点理解那里发生了什么，但是有人可以打破它并“在javascript中翻译它”，这样我就可以更好地理解这个想法，因为我还在学习javascript，所以我几乎无法用jquery做很酷的事情，我知道关于jqueries的某些事情，但还不足以完全理解他在那里所做的事情以及关于正则表达式的足够知道，知道编写代码的人是天才＆lt; 3

这是我理解的，请纠正我：

var $rows = $('#table tr');

这是范围，“目标”将在哪里寻找比赛

pd：这是我第一次看到'$'来声明变量，而我看来它把它设置为一个jQuery对象..就是这样吧？

var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
    reg = RegExp(val, 'i'),
    text;

'$。trim（$（this）.val（）'等于$ .trim（$（“＃user_input”）。val（））; ..... ..right？

reg = RegExp(val, 'i')

reg变量用作构造函数来查找不区分大小写的匹配，但不应该是'reg = new RegExp（val，'i'）'或者我可以设置它也是如此？

这是我最困惑的时候

$rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
}).hide();

我能理解的是，只有当他们通过文本变量设置的过滤器时才会显示匹配项，而不会隐藏的是匹配项，我对 $的概念一无所知（这个）等同于......在文本变量中......从那里我不知道发生了什么，我发现 .test（）返回true或false当它在regexp对象中找到匹配但为什么它在开头有！时？

Answer 1

var $ rows = $（'＃table tr'）;

这是范围，“目标”将在其中寻找   匹配

pd：这是我第一次看到声明变量的'$'和   我看起来它把它设置为一个jquery对象..就是这样吧？

是的，$ rows是目标，但是'$'符号实际上没有意义，这是jquery程序员的一种方法。这对于记住一个jquery对象是有好处的，“hımmm，它在开头有一个'$'，所以它必须是一个jquery对象”。

事实上var $rows = $('#table tr');和var rows = $('#table tr'); - ＆gt;这些相同，$rows和rows之间没有任何差异。

<强> -------------------------------------------- --------------------------------------------- < / p>

var val ='^（？=。 \ b'+ $ .trim（$（this）.val（））。split（/ \ s + /）。join（'\ b）（？=。 \ b'）+'）。* $'， reg = RegExp（val，'i'），
text; the '$.trim($(this).val()' is equal to $.trim($("#user_input").val()); .......right?

在javascript this中引用该事件的所有者。对于您共享的示例，this在$('#search')的keyup回调函数中使用，因此this表示$("#search")。

<强> -------------------------------------------- --------------------------------------------- < / p>

reg = RegExp（val，'i'）reg变量用作要查找的构造函数匹配不区分大小写，但不应该是'reg = 新的RegExp（val，'i'）'或我可以设置它也是如此？

this question对Javascript的新关键字有很好的解释，你可以检查一下。

<强> -------------------------------------------- --------------------------------------------- < / p>

$rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
}).hide();

让我们一步一步解释

var $rows = $('#table tr');

$rows是一个tr对象数组
$rows.show()表示显示表中id为#table的所有tr标记。
jQuery is chainable，这意味着$rows.show()再次返回$rows
所以$rows.show().filter() = $rows.filter
再次$rows仍然是一个tr对象数组，因此$rows.filter()像for循环一样循环遍历此对象，为$rows中的每个对象处理回调函数。
在回调函数中，这指的是所有者，在此示例中，所有者是当时过滤器循环$ rows的对象。
正如您所说test()返回bool值。
!是一个逆变器，

!true = false

!false = true

Answer 2

我要去吧！ Guten标签，nero！

我会自上而下回答您的问题，看看我们是否可以覆盖您的问题。首先，您对行变量的理解是正确的。它是一个jquery对象，包含一个与搜索字符串匹配的DOM对象数组。在这种情况下，表格中的tr。

您还可以使用#user_input部分。 keyup函数中的$（this）是对首先抛出事件的DOM对象的引用。在这种情况下，用户输入。

但不应该是＆＃39; reg = new RegExp（val，＆＃39; i＆＃39;）＆＃39;或者我可以设置它也是如此？

使用new关键字似乎更安全。如需进一步参考，请参见此处：http://zeekat.nl/articles/constructors-considered-mildly-confusing.html。如果您仅仅依靠“静态”，则可能没有必要这样做。有点像一个班级 - 但是我说的更安全而不是遗憾。

现在是困难的部分：

$rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
}).hide();

$ rows.show（）将使jquery对象中的所有DOM对象可见。

然后在同一组对象上进行过滤＆＃39;这意味着它将根据返回布尔值的函数减少var 行中的DOM对象。在这种情况下，该功能是：

text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);

用一个空格替换所有空格，然后测试它是否与正则表达式匹配。所以在这里，如果它传递你的正则表达式（！=逻辑非），它就会保留在集合中。

最后 - 此功能将隐藏通过过滤器的所有内容。

所以它显示了所有内容，然后隐藏了与正则表达式不匹配的内容。

希望有所帮助！ Habst ein guten neue Jahre（我的德语怎么样？）

Answer 3

$是jQuery对象，它只是一个指向jQuery的变量名。不要担心$行，这只是另一个变量名。

var $rows = $('#table tr');

右侧基本上是将选择器传递给jQuery并告诉它找到与之匹配的所有DOM元素。如果你知道CSS这是相同的原则，＃table是一个id="table"的元素，并与tr结合意味着选择该元素中的所有行（tr是表行html标记）。

在纯JavaScript中，这可以写成

var $rows = document.querySelectorAll("#table tr");

结果是元素列表。

然后你找到另一个元素，并附加一个事件监听器：

$('#search').keyup(function() { ... });

请注意，这是将另一个选择器传递给jQuery，它返回所需的元素，并在其上附加一个keyup事件。在JavaScript中，这可能是：

document.getElementById("search").addEventListener("keyup", function() { ... });

当在元素上触发该键盘事件时，执行该函数，并且您正在构建一个包含以下内容的字符串val：

... + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ...

this中的

$(this).val()计算#search选择器找到的元素，在本例中为输入字段。

这可能是纯javascript中的以下内容：

... + document.getElementById("search").value.trim().split(/\s+/).join('\\b)(?=.*\\b') + ...

如果你评估那个表达式，它1）修剪空格，2）将结果拆分成每个空格字符的字符串数组，3）用分隔符\\b)(?=.*\\b

连接该数组

步骤2）和3）基本上是String.replace(/\s+/, '\\b)(?=.*\\b')但更快。

转到最后一位，jQuery show()方法应用于$ rows中的每个元素，这是在开头找到的元素列表（表行）。这使得每一行都可见。

然后将filter方法应用于该列表，这是一个循环遍历调用每个元素内定义的函数的元素列表。请注意，过滤器函数中的this现在指的是正在测试的表行，而不是搜索字段。

如果该过滤器函数在列表项上返回true，该项仍保留在结果列表中，如果为false，则将其删除。这里准备了RegExp，如果匹配，则返回false。所以在过滤后你有一个不匹配的元素/行列表，最后应用.hide()这是一个jQuery方法来隐藏调用它的所有元素。所以你隐藏了不匹配的行。

代码可能看起来像是＆＃34;纯粹的＆＃34; javascript（现在应该可以工作，我修复了cjsmith在评论中写到的问题）。

var $rows = document.querySelectorAll("#table tr");
document.getElementById("search").addEventListener("keyup", function(e) {

  var val = '^(?=.*\\b' + e.target.value.trim().split(/\s+/).join('\\b)(?=.*\\b') + ').*$';
  var reg = RegExp(val, 'i');

  Array.prototype.forEach.call($rows, function(row) {
    var text = row.textContent.replace(/\s+/g, ' ');
    row.style.display = reg.test(text) ? 'table-row' : 'none';
  });

});

PS。新年快乐！

'从jQuery到JavaScript的翻译'

3 个答案: