Js : 如何 Copy/Paste 文本包括从网页到我的 html 页面的超链接

Question

假设 thete 是互联网上的一个网页 www.random-webpage.com ，其中包含一些文本数据和隐藏的超链接 :

示例：

测试测试测试点击这里

然后，当单击“此处”时，它会打开超链接 www.myhyperlink.com

我的目的是能够使用 ctrl+c 复制整个文本并将其 ctrl+v 粘贴到我的 html textarea / 输入并捕获超链接的地址，而不仅仅是文本。

我是在 Angular 应用程序下做的，但是可以用 js 或 angular

来处理吗

建议 ?

Answer 1

如本文所述link： https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData
你应该使用 clipboardData.getData(format) 并且格式是 'text/html' 但首先你需要将侦听器绑定到 paste 事件。
让我们看看整个代码：

let box = document.getElementById('boxLikeTextarea');
let textarea = document.getElementById('textarea');
box.addEventListener('paste', function(e) {
  e.preventDefault();
  let html = e.clipboardData.getData('text/html');
  box.innerHTML = html;
});
textarea.addEventListener('paste', function(e) {
  e.preventDefault();
  let html = e.clipboardData.getData('text/html');
  textarea.innerHTML = html;
});

#boxLikeTextarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<textarea id="textarea">I am a textarea</textarea>
<div id="boxLikeTextarea" contenteditable>I look like a textarea</div>

注：因为 Textarea 不能显示 link 而只显示 text 你应该有一个 div 像 Textarea 来显示 link 在

Js : 如何 Copy/Paste 文本包括从网页到我的 html 页面的超链接

Js : How to Copy/Paste text including hyperlinks from webpage to my html page

html

javascript

ecmascript-5

ecmascript-6

angular