This isn't rocket science in the world of Web Development but I think it's so darn useful that if you've been unlucky to miss this, it's worth mentioning one more time.
Suppose you're on a site with lots of links. Like https://www.peterbe.com/plog.
And you want to get a list of all URLs that contain word "react" in the URL pathname.
And you want to get this into your clipboard.
Here's what you do:
-
Open your browsers Web Console. In Firefox it's Alt+Cmd+K on OSX (or F12). In Chrome it's Alt+Cmd+J.
-
Type in the magic:
copy([...document.querySelectorAll('a')].map(a => a.href).filter(u => u.match(/react/i)))
-
Hit Enter, go to a text editor and paste like regular.
It should look something like this:
[ "https://www.peterbe.com/plog/10-reasons-i-love-create-react-app", "https://www.peterbe.com/plog/how-to-deploy-a-create-react-app", "https://www.peterbe.com/plog/4-different-kinds-of-react-component-styles", "https://www.peterbe.com/plog/onchange-in-reactjs", "https://www.peterbe.com/plog/tips-on-learning-react", "https://www.peterbe.com/plog/visual-speed-comparison-of-angularjs-and-reactjs", "https://www.peterbe.com/plog/600-billion-challenge-reactions", "https://www.peterbe.com/plog/active-reactor-watches" ]
The example is just that. An example. The cool thing about this is:
- The Web Console built-in command
copy()
. - That
[...document.querySelectorAll('a')]
turns theNodeList
object into a regular array. - That the
.map(a => a.href)
is super simple and it turns eachNode
into itshref
attribute value. - That you could have used a more advanced CSS selector like
document.querySelectorAll(a[target="_blank"])
for example.
The limit is your imagination. You can also do things like copy([...document.querySelectorAll('a')].filter(a => a.textContent.match(/react/i)).map(a => a.href))
and you filter by the links' text.
Comments