一、获取/清除选中的文字

    //获取选中的文字

    document.getElementById("get").onclick = function () {

        var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;

        alert(txt);//alert默认调用了toString()

    }
    //清除选中的文字

    document.getElementById("set").onclick = function () {

        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

    }

二、设置文字选中效果

<body>

<p>这是一段默认被选中的文本</p>

<p>这是一段默认有开始截止位置的文本</p>

<div>

    <span>太阳当空照，<br></span>

    <span>花儿对我笑。<br></span>

    <span>小鸟说：“早，早，早，<br></span>

    <span>你为什么背上小书包？”<br></span>

    <span>我去上学校，<br></span>

    <span>天天不迟到。<br></span>

    <span>爱学习，爱劳动，<br></span>

    <span>长大要为祖国立功劳。<br></span>

</div>

</body>

1、全部选中

    //选中一段文字

    var range = document.createRange();

    referenceNode = document.getElementsByTagName("p").item(0);

    range.selectNodeContents(referenceNode);

    var selection = window.getSelection();

    selection.removeAllRanges();

    selection.addRange(range)

实现效果：

2、设置开始截止位置选中

    //分段式选中,可用nodeType判断

    //如果起始节点类型是 Text， Comment, or CDATASection之一, 那么 startOffset指的是从起始节点算起字符的偏移量。

    var range2 = document.createRange();

    var startNode = document.getElementsByTagName("p").item(1).firstChild;

    var startOffset = 1;

    range2.setStart(startNode, startOffset);

    var endOffset = 7;

    range2.setEnd(startNode, endOffset);

    var selection2 = window.getSelection();

    selection2.removeAllRanges();

    selection2.addRange(range2)

实现效果：

跨段选中：

    //分段式选中2

    // 对于其他 Node 类型节点， startOffset 是指从起始结点开始算起子节点的偏移量。

    var range2 = document.createRange();

    var startNode = document.getElementsByTagName("div").item(0);

    //childNode会将html换行加进去

    for (var i = 0; i < startNode.childNodes.length; i++) {

        if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) {

            startNode.removeChild(startNode.childNodes[i])

        }

    }

    var startOffset = 3;

    range2.setStart(startNode, startOffset);

    var endOffset = startNode.childNodes.length - 2;

    range2.setEnd(startNode, endOffset);

    var selection2 = window.getSelection();

    selection2.removeAllRanges();

    selection2.addRange(range2)

实现效果：

3、跨段文字特定位置选中

    //分段式选中3

    //跨段文字特定位置选中

    var range2 = document.createRange();

    var startNode = document.getElementsByTagName("div").item(0);

    //childNode会将html换行加进去

    for (var i = 0; i < startNode.childNodes.length; i++) {

        if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) {

            startNode.removeChild(startNode.childNodes[i])

        }

    }

    range2.setStart(startNode.childNodes[5].firstChild, 2);

    range2.setEnd(startNode.childNodes[7].firstChild, 8);

    var selection2 = window.getSelection();

    selection2.removeAllRanges();

    selection2.addRange(range2)

实现效果：

javascript里文字选中/选中文字的更多相关文章

  1. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  2. JS事件 内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

    内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...

  3. 排版紧凑情况下IOS 浏览器的文字部分选中问题

    一.需求 一个每一项都是图文混排的列表页,在需要对其中的某一部分文字进行选中copy的时候,IOS个二货每次都是直接选中了整个列表项,无论怎么操作它的选框都没有办法做到部分选中. 这是我本周遇到遇到的 ...

  4. 转 Android RadioButton设置选中时文字和背景颜色同时改变

    主要应用在购物车,像淘宝的那样,点击以后弹出一个选择种类颜色这样的popuwindow以后,然后这个选择种类的地方要用到类似这个玩意儿. 搜了一下,效果和这个文章一致.转了. 原文地址:http:// ...

  5. js替换选中的文字

    替换html中选中的文字 function replaceSelection() { if (window.getSelection) { var selecter = window.getSelec ...

  6. iOS TabbarController 设置底部Toolbar图片和文字颜色选中样式

    提取公共方法: -(void)createChildVcWithVc:(UIViewController *)vc Title:(NSString *)title image:(NSString *) ...

  7. jquery 获取选中的文字.当前光标所在的位置等jquery-fieldselection 插件

    写词典在线编辑器用到的一个功能 能获取选中的文字.当前的光标的位置 等位置,而且支持多个文本框一起操作 非常方便 git地址:https://github.com/localhost/jquery-f ...

  8. js获取鼠标选中的文字

    1.获取选中的文字: document.selection.createRange().text; IE9以下使用 window.getSelection().toString(); 其他浏览器使用 ...

  9. Android RadioButton设置选中时文字和背景颜色同时改变

    主要应用在购物车,像淘宝的那样,点击以后弹出一个选择种类颜色这样的popuwindow以后,然后这个选择种类的地方要用到类似这个玩意儿. 搜了一下,效果和这个文章一致.转了. 原文地址:http:// ...

随机推荐

  1. excel将百分比数据转为数值格式

    由于于原给定的数据是百分比格式的, 所以先在excel中将数据格式改为数值 修改步骤: 单纯更改单元格格式为数值没用,先在空白单元格输入数值格式的1,复制该数字,选中要转换格式的数据, 右键 ---- ...

  2. python日期加减法操作

    对日期的一些操作: 对日期的一些操作: 1 #日期转化为字符串并得到指定(或系统日期)n天后的日期--@Eillot 2 def dataTimeToString(dsNow=ReservationT ...

  3. VoiceXML简介

    简单来说,VoiceXML就是语音网络世界的HTML,一种用于语音应用的开放标准的标记语言.VoiceXML的问世使得为HTML发展起来的web体系也能够轻松地创建和使用语音应用. 发展历史: 199 ...

  4. 去掉Tomcat的管理页面

    一.去掉Tomcat的管理页面 一.方法一:如果要去掉默认该界面,可以重命名tomcat目录下的ROOT,并新建空文件夹命名为ROOT 1.刚打开tomcat,默认访问的是tomcat管理页面,比如X ...

  5. python列表常用内建方法

    python列表常用内建方法: abc = ['a',1,3,'a'] #abc.pop(1) #删除索引1的值.结果['a', 3] #abc.append([123]) #结果:['a', 1, ...

  6. 笔记-ASP.NET WebApi

    本文是针对ASP.NET WepApi 2 的笔记. Web API 可返回的结果: 1.void 2.HttpResponseMessage 3.IHttpActionResult 4.其他类型 返 ...

  7. CentOS 7 NAT模式LVS搭建

    NAT模式下 , 调度器需要有两个IP , 一个公网IP一个内网IP , web服务器只需要内网IP 调度器LB : 192.168.94.11(内网IP)  192.168.29.11 (仅主机模式 ...

  8. Spring Boot中JSON参数传递,后台实体接受问题

    1.json参数为json字符串 var data = { name: '超管不是11', password: '123456' }; $.ajax({ type:"post", ...

  9. 创建servlet程序知识点详解---servlet-day01

    方法调用完后,其中的所有局部变量都会消失 ###网络架构 -CS:Client Server  客户端服务器 特点:每种平台都需要开发相对应的app, 开发成本高  功能升级需要下载最新的客户端,用户 ...

  10. Docker Compose 一键部署LNMP

    Docker Compose 一键部署LNMP 目录结构 [root@localhost ~]# tree compose_lnmp/ compose_lnmp/ ├── docker-compose ...