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

    //获取选中的文字

    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. vimrc同步文档

    目录 vimrc ims.vim vimrc if has("syntax") syntax on endif set nocompatible "取消vi 兼容模式 & ...

  2. Visual Studio中配置Beyond Compare为版本比较工具

    VS自带的合并工具并不理想,个人比较习惯Beyond Compare,这里替换成Beyond Compare,因为并不想改变所有的VS项目设置,这里以单个仓库项目为例,源代码管理器使用GIT 找到.g ...

  3. ConnectionAbortedError: [WinError 10053] 你的主机中的软件中止了一个已建立的连接

    Traceback (most recent call last): File "C:\Users\Administrator\AppData\Local\Programs\Python\P ...

  4. 上传js,js修改html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. SQL Server (MSSQLSERVER) 服务由于下列服务特定错误而终止: %%17051

    问题出现:今天在给客户调试项目的时候,发现无法连接SQL server数据库 解决过程:1.在cmd命令窗口输入services.msc,打开服务窗口,找到SQL Server (MSSQLSERVE ...

  6. pytorch torchvision对图像进行变换

    class torchvision.transforms.Compose(转换) 多个将transform组合起来使用. class torchvision.transforms.CenterCrop ...

  7. CentOS 7 源码搭建LNMP环境

    搭建 LNMP 环境 源码包版本 :  CentOS Linux  7 nginx-1.15.1.tar.gz  mysql-boost-5.7.21.tar.gz  php-7.2.7.tar.gz ...

  8. 设计模式综合列表【QQ空间日志转载】

    C++设计模式全篇 [QQ空间日志转载]

  9. Python之多进程&异步并行

    由于python的gil,多线程不是cpu密集型最好的选择 多进程可以完全独立的进程环境中运行程序,可以充分的利用多处理器 但是进程本身的隔离带来的数据不共享也是一个问题,而且线程比进程轻量 impo ...

  10. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...