Filter Google search results with JavaScript

In this short article, we’ll see how to filter search results from the first page of Google.

Image by Unsplash

If you’re here for a quick copy-paste of code, here’s a complete JS function that copies the search results from the first page of Google search and prints the filtered h3 headings to the DOM.

function getTitles() {
   
    var arr = [...document.getElementsByTagName('h3')];
   
    var filtered = [];
    arr.forEach(x => filtered.push(x.innerText))

    var printToScreen = "";
   
    for(let i = 0; i < filtered.length; i++) {
      printToScreen += `${filtered[i]} <br>`;
    }

    return printToScreen;
}
document.body.innerHTML = getTitles()

In the rest of this article, we’ll examine how we slowly built-up to the above code, and some additional snippets to make it more useful.

There are several steps involved in writing the code above:

1. Get all elements by tag name h3 and save them in an array called arr
2. Prepare a new array called ‘filtered’ and push the result of filtering the arr array so that we only get back the innerText of each arr member
3. Prepare a new variable of type string, and name it printToScreen
4. Loop over the all the items in the filtered array; this way, we can add each item to the printToScreen string using the += operator and append a <br> element after each single filtered array item
5. return the full, completed printToScreen string which now holds the full relevant filtered results of the Google search in question
6. Assign the result of running getTitles() function to document.body.innerHTML; this effectively clears the screen of the website and leaves only the HTML string stored inside the printToScreen variable

Displaying filtered results with headings and links

We can improve the code above by filtering for 2 separate things: headings and URLs, then combining the result in an HTML structure.

Here’s the code:

function getTitlesAndLinks() {
    var arr = [...document.getElementsByTagName('h3')];

    var filteredHeadings = [];
    var filteredLinks = [];

    arr.forEach(x => filteredHeadings.push(x.innerText));
    arr.forEach(x => filteredLinks.push(x.baseURI));

    var printToScreen = "";

    for(let i = 0; i < filteredHeadings.length; i++) {
      printToScreen +=
        "<div><p>" +
        filteredHeadings[i] +
        "</p><p><a href=" +
        filteredLinks[i] +
        ">" +
        filteredHeadings[i] +
        "</p></a></div><br>"
    }
    return printToScreen;
}
document.body.innerHTML = getTitlesAndLinks();

This is how we can combine two filtered arrays into displaying in the DOM with HTML tags of our choice.

However, the baseURI property on the arr array is formatted so that it holds a google.com URL. No harm in keeping it this way, but we might want to clean it up a bit, by extracting only the actual URL to the website listed in each individual search result. To do that, we can use the String.prototype.substr() method.