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 的字符串而非表情。

相关推荐
无小道30 分钟前
Qt——QWidget
开发语言·qt
时艰.35 分钟前
Java 并发编程之 CAS 与 Atomic 原子操作类
java·开发语言
梵刹古音1 小时前
【C语言】 函数基础与定义
c语言·开发语言·算法
梵刹古音1 小时前
【C语言】 结构化编程与选择结构
c语言·开发语言·嵌入式
Yvonne爱编码1 小时前
JAVA数据结构 DAY3-List接口
java·开发语言·windows·python
一方_self1 小时前
了解和使用python的click命令行cli工具
开发语言·python
南宫码农2 小时前
我的电视 - Android原生电视直播软件 完整使用教程
android·开发语言·windows·电视盒子
摘星编程2 小时前
React Native + OpenHarmony:Spinner旋转加载器
javascript·react native·react.js
CoderCodingNo2 小时前
【GESP】C++四级/五级练习题 luogu-P1223 排队接水
开发语言·c++·算法
sycmancia2 小时前
C++进阶01——示例
开发语言·c++