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

替换选中的文本，分两种情况：HTML中的文本、输入框中的文本。输入框就是input和textarea，这里以textarea文本域为例。

import.png

替换HTML中选择的文本 {#替换html中选择的文本}

写一段文字

这是一段测试文字，测试HTML中替换选择的文本

加一个按钮

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，写入默认文字

onkeydown="savePos(this)" onkeyup="savePos(this)"

onmousedown="savePos(this)" onmouseup="savePos(this)" onfocus="savePos(this)"

>这是一段测试文字，测试文本域中替换选择的文本。如果末尾是空格 ，替换后把空格补上。

加一个按钮

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