js獲取選中值並替換
阿新 • • 發佈:2021-12-11
一,替換輸入框選中的值
<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";//替換選中的值
}