获取选中_【字节】如何实现选中复制的功能

79dcdd677ebbd4477b6e980bddb86c88.png
Barnett Demesne公园中在白雪覆盖的山坡上玩耍的一家,北爱尔兰贝尔法斯特
(© Stephen Barnes/Alamy)

本题摘自于我 github 上的面试每日一题:https://q.shanyue.tech,并有大厂面经及内推信息,可在左下角打开本题原文链接

在一些博客系统,如掘金的博客中,可以复制代码,它是如何实现的

它一般可以使用第三方库 clipboard.js 来实现,源码很简单,可以读一读

主要有两个要点

  1. 选中: Selection API
  2. 复制: document.execCommand

选中: Selection API

选中主要利用了 Selection API

选中的代码如下

const selection = window.getSelection();
const range = document.createRange();

range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);

selectedText = selection.toString();

取消选中的代码如下

window.getSelection().removeAllRanges();

它有现成的第三方库可以使用: select.js

复制: execCommand

复制就比较简单了,execCommand

document.exec('copy')

更多面试

e88ceb9800bcf69d18ccd33c1d9caa61.png
【字节-视频架构组-前端】头条架构组招人了内含自测题
376d6314855f119319c46a515b952071.png
【美团】什么是防抖和节流,他们的应用场景有哪些
ca2556e76a95d16de76e17300e73067f.png
【美团】如何获取一个进程的内存并监控

关注我

我是山月,正致力于每天用五分钟能够看完的简短答案回答一个大厂高频面试题。扫码添加我的微信,备注进群,加入高级前端进阶群.

62c2fcf758b418345eb3ac6c6cc220d3.png
加我微信拉你进入面试交流群

欢迎关注公众号【互联网大厂招聘】,定时推送大厂内推信息及面试题简答,每天学习五分钟,半年进入大厂中

503ef10f1da17e415713d15b849eda23.png
每天五分钟,半年大厂中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/564669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言 bool_程序的数据要放到哪里呢?|C语言第二篇

在C语言第一篇里我写到了编译器,在这里补充一个点,文本编辑器,编译器,IDE(集成开发环境)的区别。文本编辑器是用作编写普通文字的应用软件,如window的记事本,atom,sublime,它常用来编…

项目职责_项目经理的9个职责

虽说懂技术是项目经理的一个必要项,但事实上,很多技术出身的人,根本干不好项目经理。当项目经理之前,是活儿管你,让你干什么你就干什么,只对任务结果负责,对整体目标不负责。当项目经理之后&…

jenkins 安装插件失败_Jenkins 自动化安装插件

手工安装 Jenkins 插件的方法通常,我们有两种方法安装 Jenkins 插件。第一种方法是到 Jenkins 插件管理页面搜索插件,然后安装。第二种方法是上传 Jenkins 插件的 hpi 文件安装。这两种方法能满足大多数人的需求。第一种方法,如下图所示&…

anaconda下python中matplotlib画图无法显示中文

第一步:在自己电脑里选择喜欢的字体,搜索位置为C:\Windows\Fonts,我选择的是SimSun 第二步 查找Matplotlib默认字体目录 打开anaconda prompt,输入python,接下来进入查找过程 查找代码如下 import matplotlib print(matplotlib.…

Python编程及高级数据分析

一、介绍(11月22日) 小问题找函数 大问题找包 python数据分析常用的包 数据库实现的功能的在panda包里面找 其中M\S\P是数据可视化工具 深度学习使用的包是pytorch(facebook支持) 中文的nlp:Jieba、pynlpir 英文的nlp:NLTK 学python前的准…

helm安装_Helm部署和体验jenkins

运行在Kubernetes上的Jenkins下图来自rancher官方博客,在kubernetes环境下,jenkins任务被交给各个pod执行,这些pod在需要时被创建,任务结束后被销毁,这样既能合理利用资源,又能给每个任务提供一致的干净的初…

【无标题】【一周安全资讯1223】一图读懂《工业和信息化部办公厅关于组织开展网络安全保险服务试点工作的通知》;15亿条纽约房产记录泄露

要闻速览 1、一图读懂《工业和信息化部办公厅关于组织开展网络安全保险服务试点工作的通知》 2、国家数据局《“数据要素”三年行动计划 (2024—2026年)》公开征求意见 3、中国信息通信研究院发布《公共数据授权运营发展洞察 (2023年)》 4、15亿条纽约房产记录泄露&#xff0c…

自定义键盘码_无线+矮轴≤299?ikbc S200 2.4G 机械键盘测评

早在18年初,Cherry就发布了适用于笔记本及超薄键盘的全新轴体MX Low Profile,也就是为人所熟知的“矮轴”。之后Ducky、酷冷至尊、FILCO、ikbc等一众厂商也先后推出了搭载Cherry矮轴的超薄机械键盘,不过市场表现一直有些不温不火。在码呆看来…

simpledateformat格式_如何使用SimpleDateFormat?

SimpleDateFormat是一种比较常用的时间类,可以实现对时间按照一定的字符串格式进行处理。DateFormat类的作用把时间对象转化成指定格式的字符串。反之,把指定格式的字符串转化成时间对象。DateFormat是一个抽象类,一般使用它的的子类SimpleDa…

李沐老师的《动手学深度学习PyTorch》中的d2lzh_python包的安装

关于RNN章节 以及模型章节等会使用到d2l的python包 cmd下载地址:pip install d2l -i https://pypi.doubanio.com/simple/

人体轮廓_人体艺术:赏世界著名的女人体油画:身体轮廓

阅读本文前,请您先点击上面的“十点姐姐”,再点击“关注”,这样您就可以继续免费收到文章了。每天都有分享,完全是免费订阅,请放心关注。 …

c语言未声明的标识符什么意思_C语言中%d和%f是什么意思啊?

%d表示输入或输出十进制有符号数;%f表示输入或输出浮点数(float,四字节表示);在C语言中输出不同数据时需要用到不同的格式字符,%d是用来输出十进制整型数据的实际长度输出,%f是以小数形式输出单…

李沐老师《动手学深度学习》课程总结1

数据操作 1、 创建数组:形状、数据类型、数据值 2、 访问元素:[1, 2] 访问第二行第三列 [1, :] 访问第二行 [1:3, 1:] 子区域:第二行至第四行前一行到第二列之后所有 [::3, ::2] 子区域:每三行一跳 第零、三…行拿出; 第零、二…列…

gimp 抠图_gimp抠图教程:gimp快速实现抠图效果

摘要:将图像中需要的部分从画面中精确地提取出来,我们就称为抠图,抠图是后续图像处理的重要基础,关于gimp的快速抠图技巧你们知道吗?将图像中需要的部分从画面中精确地提取出来,我们就称为抠图,抠图是后续…

docker build -t_在Docker环境构建、打包和运行Spring Boot应用

为何考虑采用Docker?Docker是提供用户构建镜像的一种容器化技术,所构建的镜像包含了主要的应用程序和运行应用所需的所有依赖项。该镜像可在任何虚拟机或物理机器上的Docker容器上运行。它的强大之处在于允许用户在开发、测试、预生产和生产中运行同样的…

Java内部类是什么?

在类内部可定义成员变量和方法,且在类内部也可以定义另一个类。如果在类 Outer 的内部再定义一个类 Inner,此时类 Inner 就称为内部类(或称为嵌套类),而类 Outer 则称为外部类(或称为宿主类)。 …

MOOC-人工智能实践:Tensorflow笔记4.2自制数据集txt文件和数据集不匹配解决办法(读取文件名并提取内容并合并原始内容与提取内容)

1、读取文件名称生成txt文件 # P01 批量读取文件名,并将读取的文件名保存到指定路径下的txt中(带.*** 后缀)import os def ListFilesToTxt(dir, file, wildcard, recursion):exts wildcard.split(" ")files os.listdir(dir)for …

file数组 删除文件_java编程IO基础之一:File类

在整个java.io包中,File类是唯一的一个与文件本身操作有关的类,既可以执行文件的创建、删除、重命名,取得文件大小和修改日期。File的构造函数:public File(String pathname) 给定一个要操作文件的完整路径。public File(File par…

excel工具箱_WPS搬来救兵智能工具箱,强大到Excel没有还手之力

EXCEL不加班眼见Excel连胜2局,WPS慌了,搬来救兵智能工具箱,这个神器,所到之处,问题瞬间解决。这智能工具箱究竟是何方宝物,强大到Excel没有还手之力!Excel2016的闪电填充确实牛逼,不…

mysql cve 2016 3521_MySQL-based databases CVE -2016-6663 本地提权

date: 2016/11/3author: dlive0x01 漏洞原文翻译水平不高求轻喷感觉作者在写文章的时候有些地方描述的也不是特别清楚,不过结合poc可以清晰理解漏洞利用过程0x04漏洞利用过程总结给出了清晰的漏洞利用过程,结合poc食用效果更佳# http://legalhackers.com…