You've successfully subscribed to MyPad Blog
Great! Next, complete checkout for full access to MyPad Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Copying browser text from selected elements to the clipboard

Copying browser text from selected elements to the clipboard
Copying browser text from selected elements to the clipboard

Often, I need to copy text of certain elements from webpages to the clipboard for further data analysis, processing or alternative usage (like writing a blog post)

I wanted to figure out a way to automated this, but here is a quick tip to automate using Javascript that can be made seamless by creating a Text Expander snippet for the below javascript code

Here is a quick demonstration to collect the text for the title on the front page of Hacker News.


// Select the required elements. The selector will need to be modified depending on the use case

var notes = document.getElementsByClassName("s-tag");

var text = "";

for (var i = 0; i < notes.length; i++) {
    var note = notes[i].innerText;

    // concantenate the text
    text = text + "\n\n" + note;
}

// https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

console.log(text);

// copy to clipboard

copyToClipboard(text);

Extract titles from HN front page to a text editor

To Do: This can be further made efficient by modifying the extension and make the entire experience seamless!