emoji表情无法进行复制(在js中传递)

html 复制代码
<span id="encoded-emoji"></span>

之前使用的code标签 可能是这个原因导致无法进行复制(复制出来的是变量名字)

下面的是原来的复制函数

javascript 复制代码
function copyToClipboard(text) {
            var textArea = document.createElement("textarea");
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.select();
            try {
                var successful = document.execCommand('copy');
                alert('内容已复制到剪切板');
            } catch (err) {
                alert('无法复制到剪切板,请手动复制。');
            }
            document.body.removeChild(textArea);
        }

下面的是修改后的

javascript 复制代码
function copyToClipboard(elementId) {
  // 获取要复制的文本
  var textToCopy = document.getElementById(elementId).textContent;
  // 创建一个临时的textarea元素用于复制
  var textArea = document.createElement("textarea");
  textArea.value = textToCopy;
  document.body.appendChild(textArea);
  textArea.select();
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? '复制成功' : '复制失败';
    alert(msg);
  } catch (err) {
    alert('无法复制');
  }
  // 移除临时textarea元素
  document.body.removeChild(textArea);
}
  • 参数类型:

    • 第一个函数接受一个字符串。
    • 第二个函数接受一个元素的 ID。
  • 获取复制内容的方式:

    • 第一个函数直接使用传入的字符串。
    • 第二个函数通过元素 ID 来获取页面元素的文本内容。
  • 适用场景:

    • 第一个函数适用于您已经有一个字符串,并且想要复制这个字符串到剪贴板的情况。
    • 第二个函数适用于您想要复制页面中某个元素内的文本内容到剪贴板的情况。
  • 复制的内容:

    • 第一个函数会复制传入的字符串,包括任何格式化字符,如 emoji。
    • 第二个函数会复制指定元素的 textContent,这通常是纯文本,不包括任何 HTML 标签或样式。如果元素包含 HTML 格式的文本(如 <span> 或 <img> 标签),这些标签不会被复制。

在处理 emoji 时,如果 emoji 是以文本形式嵌入的(例如,使用 Unicode 字符),两个函数都应该能够正常工作。但如果 emoji 是以图像或其他非文本元素的形式嵌入的,那么第二个函数可能无法复制它们,因为它只复制文本内容。第一个函数会直接复制包含 emoji 的字符串而非表情。

相关推荐
1024奇点8 小时前
【仓颉语言入门 · 第二篇 第 22 课】
开发语言·ide·开源
Warren2Lynch9 小时前
C4 模型详解:利用 Visual Paradigm 可视化软件架构的综合指南
开发语言·uml
Knight_AL9 小时前
Java 文件下载时文件名中的 `#` 被转换成 `%23`?一次 URL 编码与解码问题排查
java·开发语言
FRing0310 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿10 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
by2099911 小时前
C++ 智能指针的所有权与使用
开发语言·c++·经验分享
砚底藏山河11 小时前
python量化自定义周期 K 线合成
java·开发语言·数据库·python·金融
IT召唤狮11 小时前
开源企业级零信任项目Pangolin,零信任能挡住PHP核弹漏洞吗?
开发语言·开源·php
知已难寻11 小时前
03 · OpenStack的计算管理 Nova
运维·服务器·开发语言·云原生·云计算·openstack·开源软件
Rover Ramble11 小时前
C++ 用互斥锁实现读写锁
开发语言·c++