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

    //获取选中的文字

    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. JavaScript面向对象之get和set设置读写属性

    之前我们通过this和prototype申明的属性都是可读写的属性,如果想实现单独控制,就必须使用get和set存取期. 基本方法的 步骤一般包含两个步骤,1,使用var关键字定义一个私有属性作为中间 ...

  2. ADG日志传输方式参数log_archive_dest_n详解

    主库的日志发送是由log_archive_dest_n参数设置(注意:同时还有一个和它相对应的开关参数log_archive_dest_state_n,用于指定该参数是否有效),下面简单介绍下该参数各 ...

  3. PHP自定义curl请求

    function http_post($url,$param,$post_file=false,$headers=[]){ $oCurl = curl_init(); if(stripos($url, ...

  4. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  5. Monte Carlo simulated annealing

    蒙特·卡罗分子模拟计算 使用蒙特·卡罗方法进行分子模拟计算是按照以下步骤进行的: 1． 使用随机数发生器产生一个随机的分子构型. 2． 对此分子构型的其中粒子坐标做无规则的改变,产生一个新的分子构型. ...

  6. Go 初体验 - 令人惊叹的语法 - defer.2 - 如何提前执行？

    上一文中讲到 defer 会在宿主函数 return 之前调用,那么我们就是想在宿主函数执行到中间调用,怎么办呢? 1. 改变宿主函数逻辑,分成多个函数,需要的那个函数里 defer . 2. 使用匿 ...

  7. Windows下安装MySql5.7（解压版本）

    Windows下安装MySql5.7(解压版本) 1. 官方地址下载MySql Server 5.7 2. 解压文件到目录d:\Soft\mysql57下 3. 在上面目录下创建文件my.ini,内容 ...

  8. ServletContext详解(转)

    ServletContext,是一个全局的储存信息的空间,服务器开始,其就存在,服务器关闭,其才释放.request,一个用户可有多个:session,一个用户一个:而servletContext,所 ...

  9. caffe-ssd编译runtest时候报错：g++: internal compiler error: Killed (program cc1plus)

    大哥,你的内存不够了,删点儿东西吧

  10. OpenStack-Neutron-VPNaaS-测试和使用

    准备 确认安全组规则允许vpn协议通过(tcp协议和icmp协议,测试的时候直接设置“进出”全开) 确认两个子网上的vm可以ping通对方路由的外网ip,确认下两个vm是否可以访问外网 测试环境 (1 ...