首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

jquery 怎么选中鼠标选中的文字,然后在前后加上标签 就是BBCODE

2012-08-09 
jquery 如何选中鼠标选中的文字,然后在前后加上标签 就是BBCODE如题,就是CSDN回复的效果就是比如我在回复

jquery 如何选中鼠标选中的文字,然后在前后加上标签 就是BBCODE
如题,就是CSDN回复的效果 就是比如我在回复框 写了“abc" 然后选中abc点击上面的B 就在abc前后加上B标签了,怎么写的呢?

[解决办法]

HTML code
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Demo : Textarea 元素的光标位置</title><style>#result {    font-size:18px;    line-height:25px;    padding-left:20px;}</style></head><body><h1>Textarea 元素的光标位置</h1><ul>    <li>获取 Textarea 元素当前的光标位置</li>    <li>设置回原先的 Textarea 元素的光标位置</li>    <li>在 Textarea 元素的光标位置插入文本</li></ul><form action="#">    <textarea id="test" rows="8" cols="50"></textarea>     <p>        <input type="button" id="get" value="Get Cursor Position"/>        <input type="button" id="set" value="Set Cursor Position"/>        <input type="button" id="add" value="Add Text After Cursor Position"/>    </p></form><h2>Textarea Range:</h2><div id="result"></div><script type="text/javascript"> var cursorPosition = {    get: function (textarea) {        var rangeData = {text: "", start: 0, end: 0 };            if (textarea.setSelectionRange) { // W3C                textarea.focus();            rangeData.start= textarea.selectionStart;            rangeData.end = textarea.selectionEnd;            rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";        } else if (document.selection) { // IE            textarea.focus();            var i,                oS = document.selection.createRange(),                oR = document.body.createTextRange();            oR.moveToElementText(textarea);                        rangeData.text = oS.text;            rangeData.bookmark = oS.getBookmark();                        for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {                if (textarea.value.charAt(i) == '\r' ) {                    i ++;                }            }            rangeData.start = i;            rangeData.end = rangeData.text.length + rangeData.start;        }                return rangeData;    },        set: function (textarea, rangeData) {        var oR, start, end;        if(!rangeData) {            alert("You must get cursor position first.")        }        textarea.focus();        if (textarea.setSelectionRange) { // W3C            textarea.setSelectionRange(rangeData.start, rangeData.end);        } else if (textarea.createTextRange) { // IE            oR = textarea.createTextRange();            if(textarea.value.length === rangeData.start) {                oR.collapse(false);                oR.select();            } else {                oR.moveToBookmark(rangeData.bookmark);                oR.select();            }        }    },    add: function (textarea, rangeData, text) {        var oValue, nValue, oR, sR, nStart, nEnd, st;        this.set(textarea, rangeData);                if (textarea.setSelectionRange) { // W3C            oValue = textarea.value;            nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);            nStart = nEnd = rangeData.start + text.length;            st = textarea.scrollTop;            textarea.value = nValue;            if(textarea.scrollTop != st) {                textarea.scrollTop = st;            }            textarea.setSelectionRange(nStart, nEnd);        } else if (textarea.createTextRange) { // IE            sR = document.selection.createRange();            sR.text = text;            sR.setEndPoint('StartToEnd', sR);            sR.select();        }    }}var tx=document.getElementById("test"),    re=document.getElementById("result"),    pos;document.getElementById("get").onclick = function(){    pos = cursorPosition.get(tx);    re.innerHTML=("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--': pos.text));}document.getElementById("set").onclick = function(){    cursorPosition.set(tx, pos);}document.getElementById("add").onclick = function(){    cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本:",""));}</script></body></html> 

热点排行