'从jQuery到JavaScript的翻译'

Question

我是一个自己学习并且用javascript搞乱的noobie,我偶然发现了那个被称为"正则表达式"的噩梦...我对他们有点了解并且我一直在做着花哨的东西,但我是陷入困境,我希望你向我澄清一下:

我一直在阅读并寻找创造比赛的方法,我匆匆忙忙地回答:

• 如何在HTML表上执行实时搜索和过滤

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

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的事情,但还不足以完全理解他在那里所做的事情以及正则表达式足以知道编写taht代码的人是天才<3

这是我的理解,请纠正我:

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

这是范围,"目标"将在哪里寻找比赛

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

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

在'$ .trim($(本).VAL()'等于$ .trim($( "#USER_INPUT")VAL()); ......吧？

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

我能理解的是,只有当它们通过文本变量设置的过滤器时才会显示匹配,并且不会隐藏那些匹配,我对于$(this)相当于什么没有任何想法....在文本变量..从那里我不知道发生了什么,我发现.test()在regexp对象中找到匹配时返回true或false,但为什么它有!一开始？

Answer 1

$是 jQuery 对象，它只是一个指向 jQuery 的变量名。不用担心 $rows，那只是另一个变量名。

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() { ... });

当元素上触发该 keyup 事件时，将执行该函数，并且您正在构建一个字符串 val，其中包含：

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

thisin$(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')但更快。

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

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

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

代码在“纯”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';
  });

});

附言。新年快乐！