'Jquery to javascript translation'

Question

I am a noobie who studied himself and fiddled with javascript, and I came across this nightmare called "regular expressions" ... I know a little about them and I did fancy things, but I'm stuck and I would like you to clarify that's for me:

I read and searched for a way to create matches, and I stumbled with a big answer:

• How to perform real-time search and filter in 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/

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

I understand what is going on there, but someone can break it and translate it into javascript for me, so that I can better catch the idea, I can hardly do cool stuff with jquery, since I am still learning javascript, I know some things about jqueries, but not enough to fully understand what he did there, and enough about regular expressions to know that the guy who wrote taht code is a genius <3

here is what i understand and please correct me:

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

this is the scope, the “target” in which it will look for compliance

pd: the first time I see "$" for variable declarations and for what I was looking for, it sets it as a jQuery object ... is this correct?

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

'$. trim ($ (this) .val () ' is equal to $ .trim ($ ("# user_input"). val ()); ....... right?

 reg = RegExp(val, 'i') 

reg variable works as a constructor to find a match that is case insensitive, but shouldn't it be "reg = new RegExp (val," me ") or can I set it just as well?

that's when I got confused the most

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

I can understand that matches will only be shown if they pass the filter specified by the text variable, and those who don’t do this are hidden, I have no idea that $ (this) is equivalent .. .. in a text variable .. and from there I have no idea what is going on, I found that .test () returns true or false when it finds a match in the regexp object, but why does it have it at the beginning ! ?

Answer 1

$ is a jQuery object, it's just a variable name pointing to jQuery. Don't worry about $ rows, this is just another variable name.

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

The right side basically passes the selector to jQuery and tells it to find all the DOM elements that match it. If you know CSS, this is the same principle, #table is an element with id="table" and in combination with tr means selecting all the rows (tr is the html tag of the row table) inside this element.

In pure javascript, this can be written as

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

The result is a list of items.

Then you will find another element and attach an event listener:

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

Note that this is passing another selector to jQuery, which returns the desired element to which you are attaching a keyup event. In JavaScript, this could be:

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

When this keyup event is fired on an element, the function is executed, and you build a string val that contains:

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

this in $(this).val() evaluates the element that was found by the #search selector, in this case the input field.

It could be the following in pure javascript:

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

If you evaluate this expression, it 1) truncates the spaces, 2) splits the result into an array of strings on each space character, and 3) combines this array with the delimiter \\b)(?=.*\\b

Steps 2) and 3) are basically a String.replace(/\s+/, '\\b)(?=.*\\b') , but faster.

Moving to the last bit, the jQuery show() method is applied to each element in $ rows, which was the list of elements (table rows) that was found at the beginning. This makes each line visible.

Then the filter is applied to this list, it is a cycle through the list of elements that call the function defined inside each element. Note that this in the filter function now refers to the table row being tested, and not to the search field.

If the filter function returns true in the list item, the item remains in the resulting list; if false, it is deleted. The one prepared by RegExp is applied here, and if it matches the function, returns false. Therefore, after filtering, you have a list of elements / lines that do not match, and finally, .hide() , which is a jQuery method, is used to hide all the elements on which it is called. This way you hide lines that do not match.

The code may look something like this in "clean" javascript (it should work now, I fixed the problem cjsmith wrote about in the comments).

 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. Happy New Year!

Answer 2

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

this is the scope, the “target” in which it will search for the match

pd: for the first time I see '$' for declaring variables and for what I looked, it sets it as a jquery object ... is this correct?

Yes, $ rows is the target, but the "$" character is virtually meaningless, that is, the jquery programmers approach. It’s good to remember the jquery object: "hımmm, it has a" $ "at the beginning, so it must be a jquery object."

Actually var $rows = $('#table tr'); and var rows = $('#table tr'); → they are the same, there are no differences between $rows and rows .

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

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? 

In javascript this indicates the owner of the event. In the example you used, this used in the callback function keyup $('#search') , therefore it means that this refers to $("#search") .

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

reg = RegExp (val, 'i') the reg variable works as a constructor to find a match that is case insensitive, but should not be "reg = new RegExp (val, 'i') ', or I can set it as there is?

There are good explanations for the new Javascript keyword in this question , you can check it out.

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

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

Explain this step by step.

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

• $rows is an array of tr objects
• $rows.show() means show all tr ​​tags that are in the table, where id is #table.
• jQuery is chain bound , this means $rows.show() returns $rows again
• so $rows.show().filter() = $rows.filter
• again $rows is still an array of tr objects, so $rows.filter() goes through this object like a for loop, the callback function is processed for each object in $rows .
• In the callback function, this refers to the owner, in this example, the owner is the object while the filter is looping the $ strings.
• As you said, test() returns the value bool.

• ! is an inverter,

  !true = false

  !false = true

Answer 3

I will go! Guten tag, nero!

I will answer your questions from top to bottom and see if we can cover it. First, you understand the string variable correctly. This is a jquery object that contains an array of DOM objects that match your search string. In this case, tr is inside the table.

You also have the #user_input part. $ (this) inside the keyup function is a reference to the DOM object that first entered the event. In this case, user input.

but there should not be "reg = new RegExp (val, 'i')" or can I install it just as well?

Using a new keyword seems more secure. See here for more details: http://zeekat.nl/articles/constructors-considered-mildly-confusing.html . This may not be necessary if you rely only on the “static” bit of the class, but it is better safe than sorry, I would say.

Now for the hard part:

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

$ rows.show () will make visible all DOM objects in the row jquery object.

Then, on the same set of objects, it will "filter", which means that it is going to reduce the DOM objects that are in var rows , based on a function that returns a boolean value. In this case, this function:

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

which replaces all spaces with a single space, and then checks to see if it matches your regular expression. So here, if it does NOT pass your regular expression (! = Boolean NOT), it remains in the set.

Finally - this function will hide everything that the filter passed.

That way, it shows everything and then hides something that doesn't match your regular expression.

Hope this helps! Habst ein guten neue Jahre (how is my German?)