如何用js实现浏览器的选中复制功能

Question

如图所示，前端有没有办法实现浏览器的这种复制链接标签，而不是href属性的功能？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要实现浏览器的选中复制功能，即在用户选中某些文本内容后，右击并选择“复制”，粘贴时能够获取选中的文本内容（而不仅仅是链接的href属性），你需要了解一点：前端JavaScript并不能直接获取用户通过右击复制的文本内容。这是因为浏览器安全机制阻止了脚本访问这种用户操作。

然而，你可以通过一些间接的方式来实现类似的功能。一种可能的方法是使用Range API和Document.execCommand方法来模拟选中并复制文本。以下是一个简单的例子：

function copyToClipboard(text) {
    var textToCopy = document.createElement('textarea');
    textToCopy.value = text;
    document.body.appendChild(textToCopy);
    textToCopy.select(); // 选中元素
    try {
        var successful = document.execCommand('copy'); // 执行复制命令
        var msg = successful ? '成功复制到剪贴板' : '无法复制到剪贴板';
        console.log(msg);
    } catch (err) {
        console.log('无法复制到剪贴板');
    } finally {
        document.body.removeChild(textToCopy);
    }
}

你可以调用这个函数并传入你想要复制的文字，例如：copyToClipboard("梦里寻他千百度")。但是这种方法不能实现用户选中任意文本后的复制，因为这涉及到用户操作，JavaScript无法直接获取或模拟。

至于你提到的第一种效果（选中链接内容，右击复制，粘贴出来的是链接文本），这是浏览器默认行为，前端代码无法改变。浏览器安全机制阻止了通过脚本改变这种默认行为。如果你想要实现类似的功能，可能需要寻找其他方法，例如使用第三方库或服务来实现深层次的文本选择和复制功能。然而，请注意这可能涉及到用户隐私和安全问题，因此在实现时需要遵守相关的法律法规和政策。