替换选中的文本，分两种情况：HTML中的文本、输入框中的文本。输入框就是input和textarea，这里以textarea文本域为例。
import.png
替换HTML中选择的文本 {#替换html中选择的文本}
写一段文字
<div>
<span>
这是一段测试文字，测试HTML中替换选择的文本
</span>
</div>
加一个按钮
<input type="button" value="替换HTML中的选中文本" onclick="boldSelection('AAA')">
js方法
/**
* 替换选择的文本，不支持textarea和input
*/
function boldSelection(text) {
if (document.selection) { // 老IE
var selecter = document.selection.createRange();
selecter.select();
var selectStr = selecter.text; //获取选中文本
selecter.pasteHTML(text); //替换为HTML元素，替换完会失去选取，如果选择的是textarea里的内容这里会报错
} else { // 非老IE
var selecter;
if (window.getSelection()) {
selecter = window.getSelection();
} else {
selecter = document.getSelection();
}
selecter = document.getSelection();
var selectStr = selecter.toString();
if (selectStr.trim() != "") {
var rang = selecter.getRangeAt(0);
// temp成为选中内容的父节点，达到加粗的效果
var temp = document.createElement('b');
rang.surroundContents(temp);
// 先删除再插入达到替换的效果，
rang.deleteContents(); // 删除选中内容
rang.insertNode(document.createTextNode(text)); //在选中内容的起始位置插入一个节点
// chrome中的bug，如果选中的是textarea中的内容，就会在textarea前面插入节点
}
}
}
查看效果
2017-09-25_17-25-58.gif
替换输入框中选择的文本
加一个textarea，写入默认文字
<div>
<span>
<textarea id="editor" name="editor" cols="30" rows="10"
onkeydown="savePos(this)" onkeyup="savePos(this)"
onmousedown="savePos(this)" onmouseup="savePos(this)" onfocus="savePos(this)"
>这是一段测试文字，测试文本域中替换选择的文本。如果末尾是空格 ，替换后把空格补上。</textarea>
</span>
</div>
加一个按钮
<input type="button" value="替换文本域中的选中文本" onclick="replaceSelection('editor','AAA')">
js代码
/**
* 保存选中位置，用于老IE
*/
function savePos(editor) {
// 判断对象是否支持某方法：if (对象.方法名) {} 方法名后不必带()
if (editor.createTextRange && document.selection) { // 老IE
if(document.selection.createRange) {
editor.caretPos = document.selection.createRange().duplicate();
}
}
/**
* 替换选择的文本用于input 和 textarea
*/
function replaceSelection(name, text) {
// 获取编辑器textarea对象
var editor = document.getElementById(name);
if (!editor) {
var editors = document.getElementsByName(name);
if (editors && editors.length>0) {
editor = editors[0];
}
}
if (!text) { // 如果没传递文本就不执行
editor.focus(); //归还焦点
return false;
}
if (editor.createTextRange && editor.caretPos) { // 老IE
editor.focus(); // 防止无限扩选
var selectStr = editor.caretPos.text;
if (selectStr && selectStr.substring(selectStr.length - 1)==" ") {
text += " "; // 右边多选中一个空格，替换后再补一个空格，优化编辑体验
}
editor.caretPos.text = text;
} else if (editor.setSelectionRange) {
// 非老IE，利用选区的开始索引和结束索引重新拼串，而不是直接操作选取，达到替换选取的目的
// 获取选中的问题
var selectionStart; // textarea选中文本的开始索引
var selectionEnd; // textarea选中文本的结束索引
selectionStart = editor.selectionStart;
selectionEnd = editor.selectionEnd;
var selectStr = editor.value.substring(selectionStart, selectionEnd);
if (selectStr && selectStr.substring(selectStr.length - 1)==" ") {
text += " ";
}
var leftStr = editor.value.substring(0, selectionStart);
var rightStr = editor.value.substring(selectionEnd, editor.value.length);
editor.value = leftStr + text + rightStr;
//重新选中新文本
selectionEnd = selectionStart + text.length;
editor.setSelectionRange(selectionStart, selectionEnd);
//非IE浏览器必须获取焦点
editor.focus();
}
}
查看效果
2017-09-25_17-34-10.gif
存在的Bug
程序中的bug就像哲学中讲的矛盾，都是普遍存在的，无法彻底解决。bug不一定要真的解决，可以用其它方法回避，只要不影响使用，也是可以接受的。下面是存在的bug：
- 1、chrome浏览器中，焦点再textare上，点击替换HTML选择的文本，就会在textarea前面增加AAA
- 2、IE8中bug较多，应该是浏览器原因，只能做到这样了
- 焦点再textarea外，点击替换文本域中的文本，有时就会在textarea上增加AAA
- 文本域通过双击选择单词，点替换文本域中的文本，选中后新文本依然是选择状态；而通过拉动光标选中的文本，替换后会失去选中状态
- 替换HTML中选中的文本，替换后会失去选中状态
在IE11中较为正常，无明显bug。如下是bug演示
Chrome里的bug
chromebug.gif
IE8里的bug
iebabug.gif
