Question

I would like to use JavaScript to clean up text that’s being copied from my site.

I use snippets like this:

body {
    vertical-align: middle; ➊
}

Where ➊ indicates comment later on. I want readers to copy this snippet and use it – so I need to delete that Unicode marker. How can I access text that’s being copied and make changes to it?

I considered deleting marker(s) from snippet when user clicks (mousedown) on it, so she could select the text, copy it and then I would restore markers but it seems a really long way to do it.

Answer 1

Just put the unicode markers in span tags, and put display none on them when the user clicks

body {
    vertical-align: middle; <span class="marker">➊</span>
}

And then do this in jQuery

$('.code')
    .mousedown(function() {
        $(this).find('.marker').css('display','none');
    })
    .mouseleave(function() {
        $(this).find('.marker').css('display','inline');
    });

As a bonus, you could then apply the following style to the .marker elements:

​.marker
{
    position:absolute;   
    right:0;
}​