文档章节

javascript 选区selection的文字替换和插入方式

IamOkay
 IamOkay
发布于 2014/11/21 15:14
字数 359
阅读 194
收藏 0
  1. 替换问题(摘自:http://blog.csdn.net/pgmsoul/article/details/8306899)

//替换选中文本内容,参数text为要替换的内容
function repaceSelectionText(text) {
    //非IE浏览器
    if (window.getSelection) {
        var sel = window.getSelection();
        alert(sel.rangeCount); //选区个数, 通常为 1 .
        sel.deleteFromDocument(); //清除选择的内容
        var r = sel.getRangeAt(0); //即使已经执行了deleteFromDocument(), 这个函数仍然返回一个有效对象.
        var selFrag = r.cloneContents(); //克隆选择的内容
        var frag = selFrag.childNodes; //如果执行了deleteFromDocument(), 这个数组长度将会是 0 
        for (var i = 0; i < frag.length; i++) {
            alert(frag[i].nodeName); //枚举选择的对象
        }
        var h1 = document.createElement('H1'); //生成一个插入对象
        h1.innerHTML = text; //设置这个对象的内容
        r.insertNode(h1); //把对象插入到选区, 这个操作不会替换选择的内容, 而是追加到选区的后面, 所以如果需要普通粘贴的替换效果, 之前执行deleteFromDocument()函数.
    }
    else if (document.selection && document.selection.createRange) {
        //IE浏览器
        var sel = document.selection.createRange(); //获得选区对象
        alert(sel.htmlText); //选择区的html文本.
        sel.pasteHTML('<h1>标题</h1>'); //粘贴到选区的html内容, 会替换选择的内容.
    }
}

2.插入文字

 function insertSelectionText(html)
{
  if(document.selection && document.selection.createRange)
  {
          /****这里需要解决IE丢失光标位置的问题,详见核心代码四**************/
          document.selection.createRange().pasteHTML(html);
        }else{
          var selection = document.getSelection();
          var range;
          if (selection)
           {
            range = selection.getRangeAt(0);
          }else {
            range = iframeDocument.createRange();
          }
          var oFragment = range.createContextualFragment(html),
          oLastNode = oFragment.lastChild ;
          range.insertNode(oFragment) ;
          range.setEndAfter(oLastNode ) ;
          range.setStartAfter(oLastNode );
          selection.removeAllRanges();//清除选择
          selection.addRange(range);

        }
        
 }


© 著作权归作者所有

IamOkay

IamOkay

粉丝 198
博文 483
码字总数 403041
作品 0
海淀
程序员
私信 提问
JavaScript 中在光标处插入添加文本标签节点 详细方法

正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。 思路:首先获得用户的选区(光标当前位置可理解...

山哥
2012/02/23
0
0
JS Range HTML文档/文字内容选中、库及应用介绍

一、前面的些话 本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意,可以让你选择HTML文档的任意部分,并可以拿这些选择的信息做你想做的事情。其中,最常见的...

老鸟的空间
2014/07/02
0
0
[译]D3.js 之 d3-selection 原理

[译]D3.js 之 d3-selection 原理 译者注 原文: 来自 D3.js 作者 Mike Bostock 的How Selections Works 译者: ssthouse 译文 在前一篇文章中, 我介绍了关于 D3 selection 的基础, 这些基础足以...

ssthouse_hust
2018/06/29
0
0
翻译:introduce to tornado - Extending Templates

在第二章中,我们看到了如何使用tornado的template轻松地将数据从handler传送给web页面。让我们在保持简洁的web tag结构的同时,轻松地向web页面插入动态数据,然而大部分网站都希望使用一个...

f1eming
2013/04/19
0
1
把WordPress文本编辑器替换百度富文本编辑器UEditor

UEditor是由百度 Web前端研发部开发的所见即所得的富文本在线编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许互联网开发者自由传播和使用代码 新增功能 远程图片抓取 ...

禄莱
2013/10/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的MonitorService

序 本文主要研究一下Elasticsearch的MonitorService MonitorService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/MonitorService.java public class MonitorServic......

go4it
26分钟前
1
0
二、Docker

1、Docker - The TLDR(Too Long,Don't Read,Linxu 终端工具 ) Docker是在Linux和Windows上运行的软件。它创建、管理和编排容器。该软件以开源方式开发,在Github上作为Moby开源项目的一部分。...

倪伟伟
40分钟前
2
0
Python猫荐书系列之七:Python入门书籍有哪些?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/ArN-6mLPzPT8Zoq0Na_tsg 最近,猫哥的 Python 技术学习群里进来了几位比较特殊的同学:一...

豌豆花下猫
今天
5
0
Guava RateLimiter限流源码解析和实例应用

在开发高并发系统时有三把利器用来保护系统:缓存、降级和限流 缓存 缓存的目的是提升系统访问速度和增大系统处理容量 降级 降级是当服务出现问题或者影响到核心流程时,需要暂时屏蔽掉,待高...

算法之名
今天
13
0
国产达梦数据库与MySQL的区别

背景 由于项目上的需要,把项目实现国产化,把底层的MySQL数据库替换为国产的达梦数据库,花了一周的时间研究了国产的数据库-达梦数据库,它和MySQL有一定的区别,SQL的写法也有一些区别。 ...

TSMYK
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部