JSFiddle - React, Tailwind, and code Playground
HTML
<div id="the-div" contenteditable="true"><h3 name="c440" class="graf--h3">Footnoter test</h3><p name="5b18" class="graf--p">Lorem ipsum dolor sit amet<a href="#d847"> ¹</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<a href="#d847"> ²</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p name="d847" class="graf--p">References</p><ol style=""><li><a href="#5b18">^ </a> my first reference</li><li><a href="#5b18">^ </a> my second reference</li></ol></div>
JavaScript
function keepRelative(event) {
event.preventDefault();
var copytext = window.getSelection().anchorNode.data.replace('reference', 'FOOTNOTE');
if (event.clipboardData) {
event.clipboardData.setData('Text', copytext);
}
}
document.addEventListener('copy', keepRelative);