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

Amodoro2023-11-20 12:32

操作说明

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

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)
}