If you have encountered a website that doesn't let you select and ultimately copy the selected text, this article is for you. I have to say, it is beyond me why website owners still employ these kinds of methods because bypassing copy protection is quite literally a 30-second task.
We'll look at 3 different methods to achieve our goal. So let's start with the first one.
1. Disabling JavaScript
JavaScript isn't used that often when it comes to blocking text selection. But it can happen, and should probably be the first method you try. The easiest way to disable JavaScript on the page you're on is to use an ad-blocking solution like uBlock Origin.
Though, as far as I know, most popular ad-blockers provide this functionality.
The nice thing about this approach is that it can be done on a site-by-site basis.
However, if you're not using an ad-blocker (for whatever reason) - the option to disable JavaScript is also native to the web browser that you're using.
But if this doesn't work, let's try something similar for CSS.
2. Overriding the CSS "user-select" property
Another popular method for blocking users from copying text is to use the user-select: none; CSS property. You don't necessarily need to know programming to figure out what that does.
Let me give you an example.
Try to select this block of text... Integer quis dignissim mauris. In hac habitasse platea dictumst. Pellentesque ut diam sodales urna tempus gravida eu a elit. Donec vel faucibus ante, non finibus nisl. Suspendisse nisl massa, rhoncus elementum erat sit amet, rhoncus lobortis velit. Duis id scelerisque est, at aliquet turpis. Ut nec tempor tortor, ac volutpat justo.
It's almost like you're seeing a picture. It's impossible to select the text. So, how to get around this technique? The easiest way is through a small JavaScript snippet.
var css = '* { user-select: auto !important; }';
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
head.appendChild(style);
style.appendChild(document.createTextNode(css));This snippet will replace the value of the user-select property so that the none specification is overridden. To execute this code, you need to open the developer console (F12), go to the Console tab and copy & paste the above snippet. Press Enter and it will be done; for that particular session.
You can also drag the following Bookmarklet to your bookmarks bar to save the snippet forever.
Once the bookmarklet is in your bookmarks bar, you can click on it anytime you encounter a website that doesn't allow selecting text/content for copying.
3. Copy text that has been turned into an image
In a few rare cases, the author of a specific website or an article might have decided to put their content inside an image. It could be anything from raw data to something like a code snippet, which if you wanted to copy you'd need to write it out word for word yourself. But there is a better way.
And that is to convert the image into text using Google Docs.
Let's say we have created an image of the previously shown snippet for overriding CSS.
The way to convert this image to text is to go to Google Drive and upload your image there. Once you have done so, you can Right click on the image, and select Open with -> Google Docs.
As you can see, the process imported both the image but also the text within the image. This is thanks to OCR, a process in which image gets converted to text media.
And that about concludes this tutorial. Now, if none of the above methods work (unlikely) - you have the option to view the entire page source (CTRL+U in most browsers) and then manually pinpoint the section you wanted to copy. The downside is that you'll need to trim the HTML tags manually.