How to Extract and List All Links from a Webpage using jQuery

Extracting particular links from a webpage is a common task in modern web development, particularly when creating sitemaps, analyzing site structure, or gathering URLs for analytics or automation.

jQuery, a lightweight JavaScript library that makes HTML traversal, event handling, and AJAX operations easier, is one straightforward and effective method to accomplish this.

In this lesson, we'll dissect a practical jQuery snippet that prints all URLs that begin with /course in the browser console after extracting them from <a> tags (anchor tags). We'll go over the reasoning, give examples of practical applications, and walk through each section of the code in detail.

The Complete jQuery Snippet


var urls = $("a").map(function() {
    var href = $(this).attr("href");
    return href && href.startsWith("/course") ? href : null;
}).get();
var text = urls.join("\n");
console.log(text);

What This Code Does

This small piece of code performs a surprisingly powerful task:

It selects all anchor tags (<a>) on the page.
It retrieves the href attribute from each link.
It filters only those URLs that start with /course (for example: /course/mvc, /course/html, etc.).
It returns a clean array of filtered URLs.
Finally, it joins them into a newline-separated string and prints the result in the console.

In short — it helps you extract all internal course links from a website that follow a particular pattern.

Code Explanation Step-by-Step

Let’s break this down carefully:

1️⃣ Selecting All Anchor Tags


$("a")

This line selects all anchor elements (<a>) in the HTML document using jQuery’s $() selector.

If your webpage has multiple links like:

<a href="/course/mvc">ASP.NET MVC</a>
<a href="/course/html">HTML Course</a>
<a href="https://google.com">Google</a>

then $("a") selects all three.

2️⃣ Mapping Each Link


.map(function() {
    var href = $(this).attr("href");
    ...
})

.map() iterates over each <a> element found in the previous step. Inside the function, this refers to the current <a> element in the loop.

$(this).attr("href") extracts the value of its href attribute.

So for each anchor tag, we’ll get:


/course/mvc
/course/html
https://google.com

3️⃣ Filtering Only “/course” Links


return href && href.startsWith("/course") ? href : null;

This line checks:

If the link has an href (not undefined or empty)
AND if it starts with the string /course

If both are true, it returns the link; otherwise, it returns null. Null entries will automatically be excluded later.

So, in our example, only /course/mvc and /course/html are returned.

4️⃣ Converting to a JavaScript Array


.get();

jQuery’s .map() returns a jQuery object — not a plain JavaScript array. Calling .get() converts it into a standard array that you can work with natively.

At this point, our urls variable will contain:


["/course/mvc", "/course/html"]

5️⃣ Joining URLs into a Text String


var text = urls.join("\n");

This combines all array elements into a single string, separating them by newline characters (\n).

The result looks like:


/course/mvc
/course/html

6️⃣ Displaying the Result


console.log(text);

This prints the final list of extracted course links to the browser console. You can open Chrome DevTools (Ctrl + Shift + I → Console) and you’ll see all the /course/... URLs neatly listed.

💡 Why This is Useful

There are many real-world scenarios where such link extraction is helpful:

1️⃣ SEO and Analytics

Web developers and digital marketers can quickly extract all course or product URLs to:

Check broken links
Generate XML sitemaps
Analyze URL structures for SEO optimization

2️⃣ Automation and Testing

QA engineers can use such scripts to verify all course links exist and point to correct pages.
Ensure navigation consistency across environments (staging vs production).

3️⃣ Content Migration

When migrating websites (for example, from old CMS to a new platform), you can extract and validate course URLs easily using this simple snippet.

🧩 Example HTML Page

Here’s how you can test the above script:


<!DOCTYPE html>
<html>
<head>
  <title>Extract Course URLs</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <a href="/course/mvc">ASP.NET MVC</a><br>
  <a href="/course/html">HTML Course</a><br>
  <a href="https://google.com">Google</a><br>
  <a href="/course/css">CSS Course</a><br>

  <script>
  var urls = $("a").map(function() {
      var href = $(this).attr("href");
      return href && href.startsWith("/course") ? href : null;
  }).get();

  var text = urls.join("\n");
  console.log(text);
  </script>
</body>
</html>

If you open this file in a browser and check the console, you’ll see:


/course/mvc
/course/html
/course/css

🚀 Advanced Variations

1️⃣ Extract Absolute URLs

If you want absolute URLs instead of relative /course/..., modify the snippet:


var urls = $("a").map(function() {
    var href = $(this).prop("href");
    return href && href.includes("/course") ? href : null;
}).get();

Here, .prop("href") returns the full URL (e.g., https://www.sharpencode.com/course/mvc).

2️⃣ Export URLs as a Downloadable Text File


var text = urls.join("\n");
var blob = new Blob([text], { type: "text/plain" });
var link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "course-links.txt";
link.click();

This automatically downloads the list of all extracted /course links as a text file — perfect for audits or backups.

3️⃣ Filtering by Multiple Patterns


var urls = $("a").map(function() {
    var href = $(this).attr("href");
    return href && (href.startsWith("/course") || href.startsWith("/blog")) ? href : null;
}).get();

⚠️ Common Mistakes to Avoid

Forgetting .get() — this will return a jQuery object, not an array.
Using .prop("href") when you only need relative links.
Missing jQuery reference — always include the jQuery library before the script.

✅ Summary

This small jQuery snippet is an elegant and efficient way to collect all internal links from a web page matching a specific pattern — in this case, all /course/... URLs.

With only a few lines of code, you can:

Extract targeted links
Format them into a text list
Use them for analysis, SEO, or content validation

In real projects, such code is especially handy for web scraping, auditing, and automated UI testing.

💬 Final Thoughts

While modern frameworks like React or Vue often move away from jQuery, it still remains a powerful utility tool for quick DOM manipulations and data extraction — particularly useful for web audits and lightweight automation tasks.

If you’re managing a course website or an educational platform like SharpEncode, this simple code can instantly give you a clean list of all your course URLs — no backend code or database query needed.