selection对象方法笔记

为方便查找，纯复制粘贴
原文链接：https://blog.csdn.net/qq_21436667/article/details/79710783

IE：document.selection

FireFox：window.getSelection()

document.selection只有IE支持，

window.getSelection()也只有FireFox和 Safari支持，都不是标准语法。
selection 对象

代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。
selection 对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用 select 方法。要获取当前选中区，请对 document 对象应用 selection 关键字。要对选中区执行操作，请先用 createRange 方法从选中区创建一个文本区域对象。

一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。

以下代码在IE浏览器中生效

// 对选定的文字进行加粗

document.selection.createRange().execCommand("Bold")

// 获取选定的文本

document.selection.createRange().text

// 获取选定的html

document.selection.createRange().htmlText

// 清除选定的内容

document.selection.clear()

// 弹出选择区的类型( None,Text,...)

document.selection.type

// 获取选取区的文字

var range = document.selection.createRange(); // 创建文本区域对象

range.moveStart("character",2); // 选定区起始点向后移动2个字符

range.moveEnd("character",1); // 选定区结束点向后移动1个字符

console.log(range.text)

以下代码仅在chrome/firefox下生效

window.getSelection().rangeCount // 获取选定区数量

window.getSelection().isCollapsed // 选取定区起始点是否重叠

// 在光标处插入图片

document.execCommand("insertImage","false","https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png")

// 在光标处插入html代码

document.execCommand("insertHTML","false","
")

// 在焦点状态下，移动光标至第一个字符后面

document.getElementById('txt').select();

document.getElementById('txt').setSelectionRange(1,1)

// 复制选定文本到剪切板

document.execCommand("Copy","false",null);

插入span到第二个字符后面

Js代码
var span = document.createElement('span');
span.innerHTML = '[this is add element]';

var sel = window.getSelection();
var startEl = $("#editor_id").next()[0].firstChild, startOffset = 2;
var range = document.createRange();
range.setStart(startEl, startOffset)
range.setEnd(startEl, startOffset);
range.collapse(true);
range.insertNode(span);
sel.removeAllRanges()
sel.addRange(range);

保存选定区

Js代码
function saveSelectionRange()
{
if( window.getSelection )
{
var sel = window.getSelection();
if( sel.rangeCount > 0 )
return sel.getRangeAt(0);
}
else if( document.selection )
{
var sel = document.selection;
return sel.createRange();
}
return null;
}

载入选定区

Js代码
function setSelectionRange(savedSel )
{
if( ! savedSel )
return;
if( window.getSelection )
{
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(savedSel);
}
else if( document.selection )
{
savedSel.select();
}
};

1、获取光标位置

Js代码
function getCursortPosition (ctrl) {
//获取光标位置函数
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus (); // 获取焦点
var Sel = document.selection.createRange (); // 创建选定区域
Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置
CaretPos = Sel.text.length; // 获取当前选定区的文本内容长度
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0'){
CaretPos =ctrl.selectionStart; // 获取选定区的开始点
}
return CaretPos;
}

2.设置光标位置

Js代码
function setCaretPosition(ctrl, pos){
//设置光标位置函数
if(ctrl.setSelectionRange) {
ctrl.focus(); // 获取焦点
ctrl.setSelectionRange(pos,pos); // 设置选定区的开始和结束点
} else if (ctrl.createTextRange){
var range = ctrl.createTextRange(); // 创建选定区
range.collapse(true); // 设置为折叠,即光标起点和结束点重叠在一起
range.moveEnd('character', pos); // 移动结束点
range.moveStart('character', pos); // 移动开始点
range.select(); // 选定当前区域
}
}

3、将光标移动到输入框
ctrl.focus();

插入指定元素到指定位置的相关代码:

Html代码
<!doctype html>
<html>
<head>
<title>selection</title>
</head>
<body>
<p id="p1" contenteditable="true"><b>Hello</b> World</p>
<input type="button" value="insertSpan" οnclick="insertSpan()" />
<script>
function insertSpan(){
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.color = "red";
oSpan.appendChild(document.createTextNode("Inserted text"));

oRange.setStart(oHello, 2);    
oRange.setEnd(oWorld, 3);    
oRange.insertNode(oSpan);    
}  
</script>

</body>
</html>

简易富文本编辑器：

代码：

Html代码
<!doctype html>
<html>
<head>
<title>selection</title>
</head>
<body>
<input type="text" name="txt" id="txt" />
<input type="button" value="移动光标" οnclick="setCaretPosition(2)" />

<p id="p1" contenteditable="true"><b>Hello</b> World</p>
<input type="button" value="insertSpanToFirst" οnclick="insertSpan()" />
<input type="button" value="insertHTMLByJS" οnclick="insertHTMLByJS()" />
<input type="button" value="insertHTMLByCommand" οnclick="insertHTMLByCommand()" />
<input type="button" value="insertImgByCommand" οnclick="insertImgByCommand()" />

console.log('blur');  
var sel = window.getSelection();  
if(sel.rangeCount){  
    cacheRange = sel.getRangeAt(0);  
    cacheRange.anchorNode = sel.anchorNode;  
    cacheRange.anchorOffset = sel.anchorOffset;  
    cacheRange.focusNode = sel.focusNode;  
    cacheRange.focusrOffset = sel.focusOffset;  
    console.log(sel.anchorNode);  
    console.log(sel.anchorOffset);      
}

};
function setCaretPosition(pos){
var ctrl = document.getElementById('txt');
//设置光标位置函数
if(ctrl.setSelectionRange) {
ctrl.select();
ctrl.setSelectionRange(pos,pos);
} else if (ctrl.createTextRange){
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
function insertSpan(){
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.color = "red";
oSpan.appendChild(document.createTextNode("Inserted text"));

oRange.setStart(oHello, 0);      
oRange.setEnd(oHello, 0);      
oRange.insertNode(oSpan);  

var ctrl = document.getElementById('p1');  
//设置光标位置函数      
if(ctrl.setSelectionRange) {     
    ctrl.select();  
    ctrl.setSelectionRange(pos,pos);      
} else if (ctrl.createTextRange){      
    var range = ctrl.createTextRange();      
    range.collapse(true);      
    range.moveEnd('character', pos);      
    range.moveStart('character', pos);      
    range.select();      
}

}
function insertHTMLByJS(){
if(cacheRange === null) return;

var appendEl = document.createElement("span");  
appendEl.textContent = "this is span";  
appendEl.style.color = "blue";  

// var appendEl = document.createElement("span");      
// appendEl.style.width = "100px";      
// appendEl.style.height = "60px";      
// appendEl.style.display = "inline-block";  
// appendEl.style.background = "left top no-repeat url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png)";  
// appendEl.innerHTML = "&nbsp;";  
  
// 方式1,通过新创建的选定区来插入  
// var oRange = document.createRange();           
// console.log(cacheRange);      
// oRange.setStart(cacheRange.anchorNode, cacheRange.anchorOffset);      
// oRange.insertNode(appendEl);  
  

// 方式2,通过缓存之前的选定区来插入    
var sel = window.getSelection();  
sel.removeAllRanges();  
cacheRange.insertNode(appendEl);  

if( ! sel.isCollapsed ){  
    sel.collapseToEnd();  
}  
sel.addRange(cacheRange);  
// 移除光标显示  
document.getElementById('p1').blur();  
sel.removeAllRanges();              
cacheRange = null;

}
function insertHTMLByCommand(){
if(cacheRange === null) return;

// 方式2,通过缓存之前的选定区来插入    
var sel = window.getSelection();  
sel.removeAllRanges();  
sel.addRange(cacheRange);  
document.execCommand("insertHTML", "false", "<span style='color:#ff3300'><img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=50 height=50 /></span>");  
// 移除光标显示  
document.getElementById('p1').blur();  
sel.removeAllRanges();              
cacheRange = null;

}
function insertImgByCommand(){
if(cacheRange === null) return;

// 方式2,通过缓存之前的选定区来插入    
var sel = window.getSelection();  
if( ! sel.isCollapsed ){  
    sel.collapseToEnd();  
}  
sel.addRange(cacheRange);  
document.execCommand("insertImage", "false", "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png");  
// 移除光标显示  
document.getElementById('p1').blur();  
sel.removeAllRanges();              
cacheRange = null;

}

</script>
</body>
</html>

遇到的坑，优化编辑框点击后有时无法成为编辑状态的问题

优化代码如下：

Js代码
/* 优化编辑框点击后有时无法成为编辑状态的问题 */
var editor = document.getElementById('editor_id'), editorTimer = null;
editor.addEventListener('click', function(){
console.log('click');
editorTimer = setTimeout(function(){
console.log('set focus');
var sel,range;
if (window.getSelection && document.createRange) {
range = document.createRange();
range.selectNodeContents(editor);
range.collapse(true);
range.setEnd(editor, editor.childNodes.length);
range.setStart(editor, editor.childNodes.length);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(editor);
range.collapse(true);
range.select();
}
editor.focus();
},300);
}, false);
editor.addEventListener('focus', function(){
console.log('focus');
clearTimeout(editorTimer);
}, false);

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,088评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,715评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,361评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,099评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 60,987评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,063评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,486评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,175评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,440评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,518评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,305评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,190评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,550评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,880评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,152评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,451评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,637评论 2赞 335

selection对象方法笔记

以下代码在IE浏览器中生效

以下代码 仅在chrome/firefox下生效

推荐阅读更多精彩内容

以下代码仅在chrome/firefox下生效