单击文本本身将文本复制到剪贴板

Question

所以我有大量的文字，在文本中是带有括号的文字。

见下文：

目前我在PHP中执行pre_replace，基本上将[]之间的任何文本放入一个span中，然后将它们着色并给出一个可点击的类。

我基本上希望能够点击文本并将该单词复制到剪贴板。

目前我有 PHP ：

$note = preg_replace('%(\[(.+?)\])%m', '<span style="color: #009EC0;" class="hover-cursor clickable">$1</span>', $note);

我在网上找到了这个 jQuery ，只是将类名更改为我的：

// Copy replace variable to clipboard

document.getElementById('.clickable').addEventListener('click', function(event) 
{
    var copyTextarea = document.querySelector('.clickable');

    copyTextarea.select();

    try 
    {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
    } 
    catch (err) 
    {
        console.log('Oops, unable to copy');
    }
});

然而，这给我一个错误说： 无法读取null

的属性'addEventListener'

那我怎么能实现这个目标呢？