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

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

问题描述

想要通过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



目录
相关文章
|
14天前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
111 68
|
4月前
|
缓存 前端开发 JavaScript
解密前端性能优化:提升网页加载速度的关键策略
网页加载速度不仅影响用户体验,还对搜索引擎排名有直接影响。本文将深入探讨前端性能优化的多种策略,包括资源压缩与合并、延迟加载、CDN加速等。通过具体的优化方法和实际案例分析,读者将能够掌握提升网页性能的实用技巧,并能够在实际项目中有效地应用这些策略来实现更快的加载速度和更流畅的用户体验。
|
1天前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
10 5
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
23 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
25天前
|
移动开发 前端开发 JavaScript
前端开发:从零到一构建响应式网页
【10月更文挑战第1天】前端开发:从零到一构建响应式网页
32 2
|
12天前
|
前端开发 Python
帮我用python作为网页前端输出“hallow world
帮我用python作为网页前端输出“hallow world
|
13天前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
81 0
|
24天前
|
Web App开发 缓存 前端开发
前端RAG:使用Transformers.js手搓纯网页版RAG(二)- 基于qwen1.5-0.5B
本文继续探讨了RAG的后半部分,通过在浏览器中运行qwen1.5-0.5B模型实现了增强搜索全流程。然而,由于浏览器与模型性能限制,该方案更适合研究、离线及高隐私场景。文章提供了完整的前端代码,让读者能够动手尝试。此外,详细介绍了代码框架、知识库准备、模型初始化及问答实现等步骤,并展示了实际运行效果。受限于当前技术,除非在离线或高隐私环境下,网页大模型的应用仍需进一步优化。
|
24天前
|
存储 自然语言处理 文字识别
纯前端RAG:使用Transformers.js实现纯网页版RAG(一)
本文将分两部分教大家如何在网页中实现一个RAG系统,本文聚焦于深度搜索功能。通过浏览器端本地执行模型,可实现文本相似度计算和问答匹配,无需依赖服务器。RAG搜索基于高维向量空间,即使不完全匹配也能找到意义相近的结果。文中详细介绍了如何构建知识库、初始化配置、向量存储及相似度计算,并展示了实际应用效果。适用于列表搜索、功能导航、文档查询及表单填写等多种场景。
|
2月前
|
缓存 边缘计算 前端开发
关于前端性能优化问题,认识网页加载过程和防抖节流
该文章详细探讨了前端性能优化的方法,包括理解网页加载过程、实施防抖和节流技术来提升用户体验和性能。