'；从jQuery到JavaScript的转换'；

我是一个自学成才的noobie，一直在胡乱使用javascript，我偶然发现了一个叫做“正则表达式”的噩梦……我对它们有点了解，我一直在做一些有趣的事情，但我被卡住了，我希望你能向我澄清这一点：

我一直在阅读并寻找一种创建匹配的方法，我意外地得到了一个很好的答案：

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

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

}))

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

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

我有点理解那里发生了什么，但是有人能帮我把它分解成“用javascript翻译”，这样我就能更好地理解这个想法，我几乎不能用jquery做很酷的事情，因为我还在学习javascript，我知道关于jQuery的某些事情，但还不足以完全理解他在那里做了什么，也不足以了解正则表达式，从而知道编写taht代码的人是个天才 var$rows=$（“#table tr”）

这是一个范围，一个“目标”，它将寻找 匹配

pd：这是我第一次看到“$”来声明变量和 我所看到的是，它将它设置为jquery对象。是这样吗

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

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

事实上，

var$rows=$（'#table tr'）和
var行=$（'#table tr'）->这些都是相同的，
$rows
和
rows
之间没有任何区别

--------------------------------------------------------------------------------------

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

var val='^（？=。\b'+
$.trim（$（this.val（））.split（/\s+/）.join（'\b）（？=。.b'）+'））.*$'，
reg=RegExp（val，'i'）

在javascript
中，此
引用事件的所有者。对于您共享的示例，
此
用于
$（“#搜索”）
的键控回调函数，这意味着
此
指的是
$（“#搜索”）

--------------------------------------------------------------------------------------

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

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

在中有关于Javascript的新关键字的很好的解释，您可以查看

--------------------------------------------------------------------------------------

$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标记
，这意味着
$rows.show（）
再次返回
$rows
所以
$rows.show（）.filter（）
=
$rows.filter
同样地，
$rows
仍然是tr对象的数组，因此
$rows.filter（）
像for循环一样循环该对象，回调函数针对
$rows
中的每个对象进行处理
在回调函数中，这指的是所有者，在本例中，当筛选器循环$rows时，所有者是当时的对象
正如您所说的
test（）
返回布尔值
是一个逆变器

！真=假

！假=真

我要试一试！古滕塔格，尼禄

我会自上而下地回答你们的问题，看看我们能不能把它解决掉。首先，您对rows变量的理解是正确的。它是一个jquery对象，包含一个匹配搜索字符串的DOM对象数组。在这种情况下，tr在一个表中

您还将#用户#输入部分设置正确$（这）在keyup函数中是对首先抛出事件的DOM对象的引用。在这种情况下，用户输入

但是它不应该是'reg=newregexp（val，'i'）吗？或者我也可以按原样进行设置

使用新关键字似乎更安全。如需进一步参考，请参阅此处：。如果您仅仅依赖于类的“静态”部分，那么这可能不是必需的，但我认为这是一种比“抱歉”更好的安全措施

现在让我们来看看最难的部分：

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

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

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

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

它用一个空格替换所有空格，然后测试它是否与正则表达式匹配。因此，在这里，如果它没有通过正则表达式（！=逻辑NOT），它将保留在集合中

最后-此函数将隐藏通过过滤器的所有内容

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

希望有帮助！Habst ein guten neue Jahre（我的德语怎么样？
$
是jQuery对象，它只是指向jQuery的变量名。不要担心$rows，这只是另一个变量名

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

右侧基本上是向jQuery传递一个选择器，并告诉它查找与之匹配的所有DOM元素。如果您知道CSS，这是相同的原则，#table是一个元素，带有
id=“table”
，与
tr
组合表示选择该元素中的所有行（tr是table row html标记）

在纯javascript中，这可以写成

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

结果是一个列表
var $rows = document.querySelectorAll("#table tr");

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

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

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

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

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

});