JS选中文本高亮

最新推荐文章于 2024-04-05 23:55:18 发布

ZionHH

最新推荐文章于 2024-04-05 23:55:18 发布

阅读量2.3k

点赞数 3

分类专栏： Notes 文章标签： javascript getSelection execCommand 文本高亮

本文链接：https://blog.csdn.net/z291493823/article/details/122646795

版权

Notes 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

实现选中文本高亮，主要用到的两个API：

Window.getSelection
用于获取选中文本
document.execCommand
用于将选中文本高亮

在这里插入图片描述
完整代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>demo</title>
  </head>
  <body>
    <div onmouseup="highlight('yellow')">
      Window.getSelection 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
      如果想要将 selection 转换为字符串，可通过连接一个空字符串（""）或使用 String.toString() 方法。
      你还可以使用 Document.getSelection()，两个方法等价。
    </div>

    <script>
      function highlight(color) {
        let range = null
        const sel = window.getSelection() // 选中文本

        console.log(sel.toString())
        if (sel.rangeCount && sel.getRangeAt) {
          range = sel.getRangeAt(0)
        }
        // 开启文档编辑
        document.designMode = 'on'
        if (range) {
          sel.removeAllRanges()
          sel.addRange(range)
        }
        document.execCommand('BackColor', false, color)

        document.designMode = 'off'
        // 去掉默认选中的蓝色
        window.getSelection().empty()
      }
    </script>
  </body>
</html>

ZionHH

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS选中文本高亮

实现选中文本高亮，主要用到的两个API：Window.getSelection用于获取选中文本document.execCommand用于将选中文本高亮完整代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>demo</title> </head> <body> <div o
复制链接

扫一扫