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

    //获取选中的文字

    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. RoR-Scaffolding

    Scaffolding能快速让rails跑起来 同时也生成JSON response rails g scaffolding "xxx" xxy:integer 生成scaffol ...

  2. ADC裸机程序

    硬件平台:JZ2440 实现功能:通过采集触摸屏ADC的电压值,推算触摸xy坐标 start.s init.c nand.c interrupt.c uart.c uart.h my_stdio.c ...

  3. Oracle 数据库逻辑结构2.md

    Oracle 数据库逻辑结构一.存储关系Oracle 数据库逻辑上是由一个或多个表空间组成的,表空间物理上是由一个或多个数据文件组成的:而在逻辑上表空间又是由一个或多个段组成的.在Oracle 数据库 ...

  4. java框架之Spring(3)-JDBC模板使用&事务管理

    下面内容使用到的 jar 包下载 JDBC模板使用 入门 1.导包,如要导入 Spring 的基本开发包.数据库驱动包.Spring 提供的 JDBC 模板包,如下: 2.测试: @Test publ ...

  5. python框架之Django(6)-查询优化之select_related&prefetch_related

    准备 定义如下模型 from django.db import models # 省份 class Province(models.Model): name = models.CharField(ma ...

  6. 查看文件内容 cat ， tac

    cat  文件名字tac  文件名字  --  倒序查看文件内容

  7. Python tesserocr模块使用示例

    操作系统:Win10 1709  X64 python版本:3.6.5 依赖模块:PIL.tesserocr. 需要说明的是,在windows系统上PowerShell通过PIP3 install t ...

  8. VS2015 新建 ASP.NET Web应用程序, 此模板尝试加载程序集‘Microsoft.VisualStudio.Web.Project’, 解决方案

    下载并安装Azure的SDK即可:

  9. C++ const用法 尽可能使用const

    C++ const 允许指定一个语义约束,编译器会强制实施这个约束,允许程序员告诉编译器某值是保持不变的.如果在编程中确实有某个值保持不变,就应该明确使用const,这样可以获得编译器的帮助. 1.c ...

  10. 框架——flask知识点回顾

    1. flask--轻量级Web开发框架 2. Flask 没有默认使用的数据库,你可以选择 MySQL,也可以用 NoSQL 3. Web程序框架的意义: 用于搭建Web应用程序 免去不同Web应用 ...