Consider this problem, you find a list of links on a web page, and you want get its URL and link address and save them to a file. If there are only several links, you can get them by right clicking the mouse on the link and copy link address or select the link text to copy the link title and repeat it for each link. When you get a dozen of links, its too cumbersome.

At first I want to use console.log and copy from the output, but Chrome console doesn't allow to do that, when you press Ctrl + a, only the prompt line get select, looks there are no way to select the whole console frame.

In this post shows how to do it with Javascript in Chrome console.

Prepare jQuery and select the elements

First we need to select all link using Javascript, make sure the page has jQuery, if its no, paste the following code to console

 
window.d = document.createElement("script");
d.async = "async";
d.type = "text/javascript";
d.src = "http://code.jquery.com/jquery-2.0.3.min.js";
 
d.onload = d.onreadystatechange = function(c, e) {
    if (!d.readyState || /loaded|complete/.test(d.readyState)) {
    }
}
window.head = document.getElementsByTagName("head")[0];
 

Now we can get all the elements by CSS selector

 
var foo = jQuery('.post-content a');
 

Using console-save Javascript snippet

The second step is using a Chrome console Javascript code snippet called console-save, you can find it at http://bgrins.github.io/devtools-snippets/#console-save.

Or you can use the following code list, just copy it and paste it into the console

 
(function(console){
 
console.save = function(data, filename){
 
    if(!data) {
        console.error('Console.save: No data')
        return;
    }
 
    if(!filename) filename = 'console.json'
 
    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }
 
    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')
 
    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }
})(console)
 

Extract information from DOM elements

The function console.save will save a JSON object as a text file, you can see it in Chrome chrome://downloads/ tab.

For a list of links, we can use the each method provided by jQuery and append extracted text to a global array.

 
var arr = [];
foo.each(function () {
  arr.push(jQuery(this).attr("href"));
  arr.push("\n");
  arr.push(this.innerHTML);
  arr.push("\n\n");
})
 
console.save(arr, "abc.txt");
 

We add some newlines between text, this makes it easier to read. Execute the above code you will get a text file downloaded. Its just a dump of JSON object.

If you have a Clojure REPL Emacs buffer at your disposal. Just open the text file and replace the beginning [ character as (print and the end ] to ) and then paste the whole text to Clojure REPL, you will get a decent output.