AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端|获取网页中鼠标选中文字

2023-06-20 262
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端|获取网页中鼠标选中文字

问题描述

想要通过js从网页中获取鼠标选中的文字离不开window.getSelection这个属性（不适用于ie9以下的浏览器）

window.getSelection()，返回一个Selection对象，表示用户选择的文本范围或光标的当前位置

因为返回的是一个对象需要用到.toString()强行把他转化成字符串并用alert()把它以网页弹窗的形式展示出来

解决方案

js代码：

var funcGetSelectText = function(){
    var txt = '';//初始化
    if(document.selection){//判断是否是ie浏览器
        txt =  document.selection.createRange().text;         //ie浏览器
    }else{
        txt =  document.getSelection();   //其他浏览器
    }
    return txt.toString();
}
var container = container || document;
container.onmouseup = function(){
    var txt = funcGetSelectText();
    if(txt)
    {
        alert(txt);
    }
}

嵌入一个简单的网页

<html>

<head>

<title>获取网页中鼠标选中文字</title>

</head>

<body>

<p>获取网页中鼠标选中文字<p>

<script>

var funcGetSelectText = function(){
        var txt = '';
        if(document.selection){
            txt =  document.selection.createRange().text;         //ie浏览器
        }else{
            txt =  document.getSelection();   //其他浏览器
        }
        return txt.toString();
    }
    var container = container ||  document;
    container.onmouseup = function(){
        var txt = funcGetSelectText();
        if(txt)
        {
            alert(txt);
        }
    }
</script>

</body>

</html>

效果图：

效果图2.1

结语

以上所述是给大家介绍的js获取网页鼠标选中文字，主要涉及到window.getSelection这个属性，想了解详细用法可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getSelection



文章标签：
JavaScript
前端开发
容器
API
关键词：
前端网页
前端文字
前端鼠标
greework
目录
相关文章
游客uqb2obj6pe7ry
|
17天前
|
前端开发 JavaScript API
（前端3D模型开发）网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先，通过官方教程搭建基本项目环境，了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着，编写了加载和保存STEP模型的具体代码，包括HTML界面设计和TypeScript逻辑实现。最后，通过运行项目验证功能，展示了从模型加载到保存的全过程。此外，`mxcad3d`还支持多种其他格式的三维模型文件操作。
游客uqb2obj6pe7ry
68 7
土木林森
|
1月前
|
缓存 前端开发 JavaScript
前端开发的必修课：如何让你的网页在弱网环境下依然流畅运行？
【10月更文挑战第30天】随着移动互联网的普及，弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法，提升网页在弱网环境下的加载速度和流畅性，从而改善用户体验。
土木林森
136 4
chnjames
|
2月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换：一键复制、保存图片及生成 Markdown
在现代前端开发中，提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库，实现将网页选中文本转化为图片并保存或复制到剪贴板，或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向，为开发者提供了一个轻量级的解决方案，提升用户体验。
chnjames
190 68
东方睿赢
|
1月前
|
XML 前端开发 JavaScript
前端大神揭秘：如何让你的网页秒变炫酷，让用户欲罢不能的5大绝招！
前端开发不仅是技术活，更是艺术创作。本文揭秘五大前端开发技巧，包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计，助你打造炫酷网页，提升用户体验。
东方睿赢
78 30
龙大吉
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
49 5
龙大吉
|
1月前
|
存储 编解码 前端开发
惊！前端新手也能秒懂的高级技巧，轻松提升网页颜值与性能！
本文针对前端新手，介绍了三个简单易学的高级技巧，帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度，以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰，适合初学者上手实践。
龙大吉
39 3
游客uqb2obj6pe7ry
|
1月前
|
存储 前端开发 搜索推荐
（前端直接编辑CAD）网页CAD二次开发中线型表的使用方法
在DWG数据库中，线型样式存储在线型样式表 `McDbLinetypeTable` 中，每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式，并提供了绘制不同线型的示例代码，包括虚线、点划线和带文字的线型。通过在线示例demo，用户可以实践修改CAD图纸中的实体线型及其样式。
游客uqb2obj6pe7ry
32 3
土木林森
|
1月前
|
搜索推荐 前端开发 开发者
前端开发的必修课：如何让你的网页在搜索引擎中脱颖而出？
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键，还需注重搜索引擎优化（SEO）。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧，能帮助网页在搜索引擎中脱颖而出，吸引更多用户。
土木林森
36 5
土木林森
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧：如何让你的网页支持语音控制？
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页？现在，这个梦想触手可及。即使你是前端小白，也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例，带你走进语音控制的奇妙世界。通过Web Speech API，你只需掌握基本的HTML、CSS和JavaScript知识，就能实现语音识别和控制功能。快来尝试吧！
土木林森
190 4
土木林森
|
1月前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧：如何让你的网页支持暗黑模式？
【10月更文挑战第30天】随着现代网页设计的发展，暗黑模式已成为一种流行趋势，提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先，定义两种主题的CSS样式；然后，使用JavaScript实现模式切换逻辑，并自动检测系统主题。通过这些步骤，前端小白也能轻松掌握暗黑模式的实现，提升网页的用户体验和个性化水平。
土木林森
77 4

热门文章

最新文章

  • 1
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 2
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 3
    前端页面加载性能指标之LCP
  • 4
    前端必须掌握的设计模式——单例模式
  • 5
    （前端3D模型开发）网页三维CAD中加载和保存STEP模型
  • 6
    探索无界：前端开发中的响应式设计深度实践与思考###
  • 7
    探索前端性能优化：关键策略与代码实例
  • 8
    前端自动化测试
  • 9
    探索无界：前端开发中的响应式设计哲学####
  • 10
    前端状态管理：Vuex 核心概念与实战
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    94
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    83
  • 3
    使用Vue.js构建交互式前端的技术探索
    92
  • 4
    如何优化前端性能：关键步骤和技巧
    89
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    102
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    123
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    272
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    70
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    92
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    148

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 快速实现摄像头视频画面的远程预览
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)