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

    //获取选中的文字

    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. andorid证书生成

    首先得有JDK DOS窗口切换到证书要保存的目录 keytool -genkey -alias mykey -keyalg RSA -validity 40000 -keystore demo.key ...

  2. day21:包和异常处理

    1,复习 # 序列化模块 # json # dumps # loads # dump 和文件有关 # load load不能load多次 # pickle # 方法和json的一样 # dump和lo ...

  3. js多选下拉框

    1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...

  4. 最全的MonkeyRunner自动化测试从入门到精通（8）

    在eclipse中的一些剩余配置操作步骤一:pyhon的在eclipse配置,如图所示: 步骤二:jython的在eclipse中的配置, 在window-preference-PyDev-Jytho ...

  5. ssm中整合Mybatis可以扫描到放在mapper下面的xml文件的方法

    mybatis配置时出现org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 解决方法有两种: ...

  6. dyld_shared_cache_extract_dylibs failed

    文章来源:https://www.jianshu.com/p/e276a784fbee   s.png 数据线插上手机 Xcode->window   3.png   2.png 点击Unpai ...

  7. 运行pytorch代码遇到的error解决办法

    1.no CUDA-capable device is detected 首先考虑的是cuda的驱动问题,查看gpu显示是否正常,然后更新最新的cuda驱动: 第二个考虑的是cuda设备的默认参数是否 ...

  8. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  9. ArchLinux安装Sublime Text 3

    安装方法: 在 /etc/pacman.conf中添加 [archlinuxcn] SigLevel = Optional TrustAll Server = http://repo.archlinu ...

  10. jdk1.8新特性之lambda表达式及在Android Studio中的使用举例

    Jdk1.8已经出很久了但是很多同学对它的特性在android studio 中的应用可能还不是很熟悉,今天我们就来对这个新特性在AS中做它的应用实践. 一.首先在有JDK1.8的情况下我们要在AS的 ...