Js:如何将包含超链接的文本从网页复制/粘贴到我的html页面

Question

让我们假设thete是互联网www.random-webpage.com中的一个网页，它包含一些文本数据，并包括隐藏的超链接：

示例：

测试测试clic此处

然后，当点击"；这里"，它打开超链接www.myyperlink.com

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

我在Angular应用程序下做这件事，但有没有用js或Angular 来处理它

建议

Answer 1

如本链接所述：https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData
您应该使用clipboardData.getData(format)，格式为'text/html'，但首先需要将侦听器绑定到粘贴事件
让我们看看整个代码：

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不能显示链接而只显示text，所以您应该有一个类似于Textarea的div来显示中的链接