Make each clicked word automatically copied

Asked

Viewed 46 times

1

Good morning, I understand very little javascript but I would like to create a script for tampermonkey where every word I click inside the desired element is copied, for example

<html>
<head>
    <title>Página Teste</title>
    <meta charset="utf-8">
</head>
<body>
    <p id="copiar">Aqui vai o texto que eu quero copiar</p>
</body>
</html>

If I click any word of this element it would be copied, clicking on the word "text" will automatically give a Ctrl+c to it

Using Devtools from Chrome I did the following to test ( I understand that the code below doesn’t have much to do with what I need, but since I don’t understand much of the language this is how I was doing to test the results I need )

    let copiar = document.getElementById('copiar');
    let words = copiar.textContent.split(" ");
    function myFunction(item) {
        let txt = document.createElement("h2");
        txt.innerHTML = item
        $("body").append(txt);

    words.forEach(myFunction);

It works fine for the part of taking the full text of id='copy' and separating each word and storing them individually in an array ( maybe it’s not necessary to store ), but I have no idea how to make an "onclick" function for every word that when I click on it automatically copy to the Clipboard so I need to give only Ctrl+v. Can anyone help me please?

Thank you!

javascript tampermonkey

1 answer

0

I believe this will help you:

JS:

selecionarPalavra = () => {
    let selection = window.getSelection();
    let range = selection.getRangeAt(0);
    let node = selection.anchorNode;

    while (range.toString().indexOf(' ') !== 0) {                 
        range.setStart(node,(range.startOffset -1));
    }
        
    range.setStart(node, range.startOffset +1);
    
    do {
        range.setEnd(node, range.endOffset + 1);

    } while (range.toString().indexOf(' ') === -1 && range.toString().trim() !== '');

    let str = range.toString().trim();
    alert(str);
};

HTML:

<html>
<head>
    <title>Página Teste</title>
    <meta charset="utf-8">
</head>
<body>
    <p  onClick="selecionarPalavra()">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu, consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu.
</p>
</body>
</html>

Follow the Codepen: https://codepen.io/WegisSilveira/pen/YzwGVWj?editors=1010

Here I am simply taking the words and printing them into a alert, but after copying them you can work them as you wish.

  • Thank you for the reply, searching yesterday I got some progress using the following function http://jsfiddle.net/p89jm1yb/, it worked more or less the way I want, apart from the fact that I have to double click to make the copy of the word, but when I tried to move to the tampermonkey it didn’t work on the page I need to use. Gist with the code used in the tampemonkey https://gist.github.com/edufgimenez/ffa9ed45185c34655b68dc427e339e6b I don’t know much about java but I’ll look at your code and see what I can make of it. Thank you

Browser other questions tagged javascript tampermonkey

You are not signed in. Login or sign up in order to post.