How to copy rich text with hash links (inline) without copying the page url?

Question

I am trying to copy some text from a page without copying the entire page url for the inline (#links).

Here's my example fiddle: https://jsfiddle.net/adxhoz5v/10/

When you press the copy button, it copies the entire link and the clipboard, when pasted into another rich text editor, looks like this:

<p>But it is a fascinating CSS trick and the web is a big place with an unknowable magnitude of situations where sometimes weird solutions are needed.</p>
<h3><a id="technique-1-directional-trickery" class="aal_anchor" href="https://fiddle.jshell.net/_display/?editor_console=true#technique-1-directional-trickery" aria-hidden="true"></a>Technique #1: Directional Trickery</h3>
<p>The trick here is to have the scrolling parent element use&nbsp;<code>direction: rtl</code>&nbsp;(or the opposite of whatever your primary direction is), and have the inside of the scrolling element switch back to whatever your normal is.</p>

Notice how it copies the inline link with url of the jsfiddle page (page url):

href="https://fiddle.jshell.net/_display/?editor_console=true#technique-1-directional-trickery"

My question is, is there a way to prevent this default behaviour so that I am only left with the inline links in my clipboard. Like so:

href="#technique-1-directional-trickery"

To reproduce, please use your desktop or any online rich text editor like: https://html-online.com/editor

Answer 1

The problem is that it will always add the baseURI of the document for rich text output. Since this property is automatically populated and read-only there's no way to avoid this.

Luckily there's a workaround though. You can utilize the ClipboardEvent interface to obtain the data of your DIVs .outerHTML property instead of relying on the ClipboardJS library. Rich text is preserved by setting the format of the copied text to text/html.

Here's an example based on your fiddle:

function copyToClipboard(val) {
  function listener(e) {
    e.clipboardData.setData("text/html", val);
    e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);
}

<div id="target">

  <p>But it is a fascinating CSS trick and the web is a big place with an unknowable magnitude of situations where sometimes weird solutions are needed.</p>
  <h3>
    <a id="technique-1-directional-trickery" class="aal_anchor" href="#technique-1-directional-trickery" aria-hidden="true"></a>Technique #1: Directional Trickery</h3>
  <p>The trick here is to have the scrolling parent element use&nbsp;<code>direction: rtl</code>&nbsp;(or the opposite of whatever your primary direction is), and have the inside of the scrolling element switch back to whatever your normal is.</p>
</div>

<button onclick="copyToClipboard(document.getElementById('target').outerHTML)">
   Copy to clipboard <svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px">
  <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/>
</svg>
</button>