Question 390576 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Use wildcards to trace an a.href in the querySelectorAll NodeList

Let’s say that instead of looking at the ID, I want to select all a.href elements that contain (a piece of) this example: if document.url is "www.youtube.com".

var youtubeID = document.querySelectorAll('.youtubelink');

var youtubeDiv = document.querySelectorAll('a[href^="http://www.youtube.com"]');
Tags:

2

Answers


  1. 0

    You can use * wildcard which matches any attribute value where https://www.youtube.com appears anywhere in the string.

    Use this selector
    a[href*="https://www.youtube.com"]

    var youtubeDiv = document.querySelectorAll('a[href*="https://www.youtube.com"]');
console.log(youtubeDiv.length);
    <a href="https://www.youtube.com/example-slug">Link 1</a>
<a href="https://example.com?link=https://www.youtube.com/example-slug">Link 2</a>
<a href="https://example.com?link=https://www.youtube.com/example-slug&referer=stack">Link 3</a>
    Login or Signup to reply.
  2. 0

    @YuvarajM’s example selects the given link even if it contains only part of url (example: anothersite.com?link=www.example.com). Additionally, it will not select it if it is written with the http:// protocol instead of https://, or if the www. part is not included.

    Although this solution is correct, you may want to set stricter rules, which, however, is not possible using querySelector.

    Solution

    Using regex allows for even more unique and stringent rules to be specified.

    With my example, it will select all your hyperlinks regardless of the protocol and http://www., which are:

    • example.com (without protocol and www.)
    • www.example.com (without protocol)
    • http://example.com (without www.)
    • http://www.example.com
    • https://example.com (without http://www., with a different protocol)
    • https://www.example.com
    // Select <a> elements with hrefs containing the pattern
function selectExampleComLinks() {
  const links = document.querySelectorAll('a');
  const pattern = /^(https?:)?//(www.)?example.com/; // pattern that the URL must match
  return Array.from(links).filter(link => pattern.test(link.href)); // from the <a> array, we filter out those where the result of pattern.test() will be true 
}

// Test
const matchingLinks = selectExampleComLinks();
console.log(matchingLinks);
    a {
  display: block;
}
    <!-- Successfully cases -->
<a href="//example.com">example.com (without protocoll, without www)</a>
<a href="//www.example.com">www.example.com (without protocoll)</a>
<a href="http://example.com">example.com (HTTP, without www)</a>
<a href="http://www.example.com">www.example.com (HTTP)</a>
<a href="https://example.com">example.com (HTTPS, without www)</a>
<a href="https://www.example.com">www.example.com (HTTPS)</a>
<a href="https://www.example.com/slug">www.example.com/slug (with slug)</a>
<a href="https://www.example.com/slug/">www.example.com/slug/ (end of /)</a>
<a href="https://www.example.com?example=query">www.example.com?example=query (with query)</a>

<!-- Test cases -->
<a href="//nonexample.com">nonexample.com</a>
<a href="//www.nonexample.com">www.nonexample.com</a>
<a href="http://nonexample.com">http://nonexample.com</a>
<a href="http://www.nonexample.com">http://www.nonexample.com</a>
<a href="https://nonexample.com">https://nonexample.com</a>
<a href="https://www.nonexample.com">https://www.nonexample.com</a>
<a href="//nonexample.com?link=http://www.example.com">nonexample.com (example.com just a part of this url)</a>
<a href="//subdomain.example.com'">subdomain.example.com (this just a subdomain of example.com)</a>

    More information

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search