Come modificare il testo copiato in una pagina web con JavaScript

Sempre più spesso in rete si trovano testi copiati da altri siti, magari riportati nei commenti dei blog, nei forum o addirittura in documenti PDF. Come fare per proteggere la paternità dei propri testi? Ci sono sicuramente diversi modi. Per prima cosa è consigliabile tutelarsi indicando chiaramente i diritti d'autore nel proprio sito e specificando con quale licenza sono pubblicati. Ad esempio i contenuti di questo sito non possono essere ricopiati (a meno che non venga data una autorizzazione eplicita) ed in ogni caso è obbligatorio che venga specificato esattamente il nome dell'autore e l'indirizzo web da cui sono stati presi, inoltre non possono essere utilizzati a fini commerciali ed infine non possono essere alterati o usati per creare nuove opere derivate.

Anche se le indicazioni dei copyright e della licenza dei contenuti sono ben chiari in ogni sito, molti li ignorano e copiano comunque testi e immagini. C'è quindi bisogno di qualche sistema che impedisca questa operazione. Ad esempio si possono usare tecniche di sostituzione del testo con immagini (ma queste potrebbero essere negative ai fini del SEO), oppure si può usare JavaScript per intercettare l'azione di copiatura ed agire sul comportamento predefinito del sistema in più modi come:

• rimuovere il testo copiato dagli appunti/clipboard;
• modificare il testo copiato con una stringa a piacere;
• aggiungere delle note di copyright al testo copiato.

Il terzo modo potrebbe essere interessante per i siti web dove non è importante il fatto di essere citati (almeno non integralmente) ma avrebbero piacere a veder rispettati i diritti di attribuzione.

Ecco quindi un semplice codice in JavaScript per aggiungere una breve nota informativa al testo copiato da una pagina web.

Il cuore dello script è la seguente funzione:

function aggiungiCopyright() {
  var el_body = document.getElementsByTagName('body')[0];
  var select;
  if (window.getSelection) {
    select = window.getSelection();
  }
  else if (document.selection) {
    select = document.selection.createRange();
  }
  var text = "<br /><br /> Tratto da: <a href='"+document.location.href+"'>"+document.location.href+"</a><br /> &copy; FiNeX.org";
  var el_div = document.createElement('div');
  el_div.style.left='-9999px';
  el_div.style.position='absolute';
  el_body.appendChild(el_div);
  el_div.innerHTML = select + text;
  select.selectAllChildren(el_div);
  window.setTimeout(function() {
    el_body.removeChild(el_div);
  },0);
}
document.oncopy = addLink;

Nel caso si utilizzi jQuery, al posto di utilizzare document.oncopy = addLink, si deve agganciare la funzione usando il metodo bind() nel seguente modo:

$(document).bind('copy', aggiungiCopyright);

Il sistema funziona grazie a window.getSelection(), che però non è compatibilie con tutti i browser. Come al solito Internet Explorer funziona diversamente e quindi è stato introdotto il codice del blocco "if" che teoricamente dovrebbe estendere la compatibilità anche ad IE, anche se però non ne sono così convinto e dovrò approfondire un po' di più la questione.

Internet Explorer a parte, così facendo il testo copiato avrà in aggiunta un breve testo contenente l'URL della pagina e le informazioni di copyright. Si spera che in questo modo quando verrà incollato il testo, qualcuno non tolga i riferimenti e quindi perlomeno ci sia un riferimento al testo originale.

In alternativa si può modificare il codice che genera il div temporaneo, inserendo una stringa vuota al posto del testo da copiare che concatena il testo effettivamente selezionato dall'utente con la stringa personalizzata che si trova nella variabile text.