js 给选中的文字添加颜色、替换文字内容...,选中状态去除后更改还在(document.execCommand)

操作说明

使用document.execCommand

先选中文字后点击按钮更改选中文字状态

html 复制代码
<!--点击的按钮不能为div,目前确认button可用-->
<button @click="f">操作</button>

常用代码片段

替换选中文字的内容

js 复制代码
function f() {
  const selectDom = document.getSelection().focusNode.parentElement // 获取包裹文字的元素dom
  selectDom.contentEditable = String(true) // 开启元素可编辑状态,document.execCommand需要
  document.execCommand('insertText', false, '***') // document.execCommand只能操纵可编辑内容区域的元素
  selectDom.contentEditable = String(false) // 重置编辑状态
}

更改选中文字的颜色,失去选中状态还保留颜色值

js 复制代码
function f() {
  const selectDom = document.getSelection().focusNode.parentElement
  selectDom.contentEditable = String(true)
  document.execCommand('foreColor', false, 'yellow')
  selectDom.contentEditable = String(false)
}
相关推荐
LL.。10 分钟前
同步回调和异步回调
开发语言·前端·javascript
0wioiw021 分钟前
Python基础(吃洋葱小游戏)
开发语言·python·pygame
栗子~~29 分钟前
Python实战- Milvus 向量库 使用相关方法demo
开发语言·python·milvus
狐凄31 分钟前
Python实例题:基于 Flask 的在线聊天系统
开发语言·python
狐凄31 分钟前
Python实例题:基于 Flask 的任务管理系统
开发语言·python
Mintopia35 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
Mintopia40 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
来碗疙瘩汤44 分钟前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
打野赵怀真1 小时前
在TypeScript中装饰器有哪些应用场景?
前端·javascript
destinying1 小时前
vite学习笔记
前端·javascript