js替换选中的文字，兼容所有浏览器

替换选中的文本，分两种情况：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. 1、chrome浏览器中，焦点再textare上，点击替换HTML选择的文本，就会在textarea前面增加AAA
2. 2、IE8中bug较多，应该是浏览器原因，只能做到这样了
   1. 焦点再textarea外，点击替换文本域中的文本，有时就会在textarea上增加AAA
   2. 文本域通过双击选择单词，点替换文本域中的文本，选中后新文本依然是选择状态；而通过拉动光标选中的文本，替换后会失去选中状态
   3. 替换HTML中选中的文本，替换后会失去选中状态

在IE11中较为正常，无明显bug。如下是bug演示

Chrome里的bug

chromebug.gif

IE8里的bug

iebabug.gif