替換選中的文本瓤逼，分兩種情況：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成為選中內容的父節(jié)點蔬啡，達到加粗的效果
var temp = document.createElement('b');
rang.surroundContents(temp);
// 先刪除再插入達到替換的效果，
rang.deleteContents(); // 刪除選中內容
rang.insertNode(document.createTextNode(text)); //在選中內容的起始位置插入一個節(jié)點
// chrome中的bug镀虐，如果選中的是textarea中的內容箱蟆，就會在textarea前面插入節(jié)點
}
}
}
查看效果
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) { // 如果沒傳遞文本就不執(zhí)行
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 += " "; // 右邊多選中一個空格，替換后再補一個空格搜贤，優(yōu)化編輯體驗
}
editor.caretPos.text = text;
} else if (editor.setSelectionRange) {
// 非老IE谆沃，利用選區(qū)的開始索引和結束索引重新拼串，而不是直接操作選取仪芒，達到替換選取的目的
// 獲取選中的問題
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
- 文本域通過雙擊選擇單詞，點替換文本域中的文本封救，選中后新文本依然是選擇狀態(tài)拇涤；而通過拉動光標選中的文本，替換后會失去選中狀態(tài)
- 替換HTML中選中的文本誉结，替換后會失去選中狀態(tài)
在IE11中較為正常鹅士，無明顯bug。如下是bug演示
Chrome里的bug
chromebug.gif
IE8里的bug
iebabug.gif
