Unveiling the Secrets of Filter Alert Javascript

Question

Unveiling the Secrets of Filter Alert Javascript

Recently, I stumbled upon this code for listing the hrefs of a website. However, now I want to filter it.

 var arr = [], l = document.links;
 for(var i=0; i<l.length; i++) {
   arr.push(l[i].href);
 }
 alert(arr);

I am looking to modify this code to display only links that contain specific text within them.

For instance, I would like to show in an alert only links that contain ?day=20, ?day=22, or ?day=25.

I attempted to add an if statement before .push, but unfortunately, it didn't work as expected and resulted in a blank alert message.

Lastly, is there a way to open each link in a new tab instead of displaying them in an alert? If so, any guidance on how to achieve this?

javascript filter alert

Answer 1

Answer №1

If you're using the latest web browsers, here's a way to achieve this:

let links = document.querySelectorAll('a[href*="day"]');

This will give you a NodeList of anchor elements that have the keyword day in their href attribute. You can then extract the href values into an array like so:

let hrefs = Array.prototype.map.call(links, function(link){
  return link.href;
});

Answer 2

If you're using the latest web browsers, here's a way to achieve this:

let links = document.querySelectorAll('a[href*="day"]');

This will give you a NodeList of anchor elements that have the keyword day in their href attribute. You can then extract the href values into an array like so:

let hrefs = Array.prototype.map.call(links, function(link){
  return link.href;
});

Unveiling the Secrets of Filter Alert Javascript

Answer №1

Similar questions

Was not able to capture the reaction from the Angular file upload

The validation using regex is unsuccessful when the 6th character is entered

Navigate within an HTML element by utilizing the element's unique ID

Check the dimensions of the image file entered using AngularJS on the client side

Iterate through a generic array to populate a table using ng-repeat

Unable to locate the JavaScript function

Issue with displaying Angular variable on webpage is not happening as expected

Tips and tricks for displaying a confirmation modal prior to a user switching to another tab

Switching the color scheme between mobile and desktop devices to make the background look

What is the correct method for service injection in Angular 8?

Experiencing difficulties with node and asynchronous programming

Angular table elements can trigger a click event that redirects to a unique URL generated from the ID of the selected element

Prevent a link from loading twice in jQuery's load() function if the parent page already

Generate Sub Menu for Navigation Bar based on Main Menu Selection

Guide to implementing dynamic conditional rendering in Vue.js loops (utilizing v-if within v-for)

Using the val() function on a select element can occasionally result in a null value

I am struggling to retrieve a value from the angular.forEach function, the flag value is not being obtained. What could be

Manipulate a table using Jquery's find() method to insert a cell populated with information from an array using before()

Retrieve a set number of values from an Observable as events occur, only loading additional values when necessary for a multi select list

Error message: A state has not been defined within the onload function