コピーした要素のスタイルや属性を含めて貼り付ける

GitHubでコミットやIssueのリンクをコピー（Ctrl+C/Command+C）して、テキストエリアに貼り付ける（Ctrl+V/Command+V）と[リンクテキスト](URL)のような形式で貼り付けられる。

他にもWebページの要素をコピーして、リッチテキストエディタなどに貼り付けるとスタイルも一緒に貼り付けられる。

これらはClipboardEvent#clipboardDataのデータを読み取ることで実現可能だ。

const testarea = document.querySelector('#textarea')

testarea.addEventListener('paste', (e) => {
  const transfer = e.clipboardData
  if (transfer === null) { return }

  // クリップボードからプレーンテキストとHTMLを取得する
  const plainText = transfer.getData('text/plain')
  const htmlText = transfer.getData('text/html')

  // テキストのHTMLをパースする
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlText, 'text/html')
  const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT)

  // パースしたHTMLのNodeをひとつずつチェックする
  let currentNode = walker.firstChild()
  while(currentNode) {
    // リンクだったらテキストの値をhref（URL）に書き換える
    if (isLink(currentNode)) {
        currentNode.textContent = currentNode.getAttribute('href')
    }
    
    currentNode = walker.nextNode()
  }

  // 書き換えた内容をtextareaに設定する
  e.target.value = doc.body.textContent || ''
  e.preventDefault()
})

function isLink(node) {
  return node.tagName.toLowerCase() === 'a' && node.hasAttribute('href')
}

デモ