js获取选中值并替换

一,替换输入框选中的值

<input onselect="textSelect(this)" id="aaa" type="text" />
<button type="button" onclick="replaceText()">11111</button>

方式一

var currentSelection={};
//记录选中的信息,不支持IE
function textSelect(obj){
    currentSelection.ele = obj;
    var start = currentSelection.start = obj.selectionStart;//从0开始
    var end   = currentSelection.end =  obj.selectionEnd;
    var text = currentSelection.text= obj.value.slice(start,end);
}
function textSelect1(obj){
    currentSelection.ele = obj;
    var text = window.getSelection();
    var start = currentSelection.start = obj.selectionStart;
}
function replaceText(){
    if(!currentSelection.ele) return;
    var val = currentSelection.ele.value;
    var reg = new RegExp("(?<=^.{"+currentSelection.start+"})"+currentSelection.text)
    currentSelection.ele.value = val.replace(reg,"大魔王");
    currentSelection = {};
}

方式二

<script src="https://cdn.bootcdn.net/ajax/libs/jquery.selection/1.0.1/jquery.selection.js"></script> 
function textSelect(element){
    var pos = $(element).selection("getPos");
    selectCaret = {src:$(element), start: pos.start, end: pos.end};
}
	
var selectCaret;
function _selectTxt(){
    return selectCaret.src.val().substring(selectCaret.start,selectCaret.end);
}
function _replaceCaret(txt){
    var pre = selectCaret.src.val().substring(0,selectCaret.start);
    var last = selectCaret.src.val().substring(selectCaret.end);
    selectCaret.src.val(pre+txt+last);
}
		
function replaceText(){
    replaceCaret("大魔王")
}

二,替换文本选中的值

//不支持IE
function replaceText(){
    var select = window.getSelection();
    if(!select) return;
    var range = select.getRangeAt(0);
    var a = document.createElement("b");
    a.style.color="red";
    range.surroundContents(a);//修饰选中的值,加粗并设置为红色
    a.innerHTML="11111";//替换选中的值
}
posted @ 2021-12-11 20:09  水映苑  阅读(392)  评论(0编辑  收藏  举报