javascript - '从 jQuery 到 JavaScript 的转换'

Question

我是一个新手，一直在自学并摆弄 javascript，我偶然发现了那个叫做“正则表达式”的噩梦……我对它们有点了解，而且我一直在做一些奇特的事情，但是我被卡住了，我希望你向我澄清一下:

我一直在阅读并寻找一种创建匹配的方法，然后我得到了很好的答案:

• 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 翻译”，这样我就能更好地理解这个想法，我几乎不能用 jquery 做一些很酷的事情，因为我还在学习 javascript，我知道一些关于 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($(this).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() 返回 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') + ...

$(this).val() 中的

this 求值为 #search 选择器找到的元素，在本例中一个输入字段。

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

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

如果您计算该表达式，它 1) trim 空格，2) 将结果拆分为每个空格字符上的字符串数组，以及 3) 使用分隔符 \\b)(?=.*\\b

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

转到最后一点，jQuery show() 方法应用于 $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';
  });

});

附言。新年快乐!