jquery 如何选中鼠标选中的文字，然后在前后加上标签 就是BBCODE

如题，就是CSDN回复的效果  就是比如我在回复框 写了“abc" 然后选中abc点击上面的B 就在abc前后加上B标签了，怎么写的呢？

解决方案 »

  1.   


    <!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.book = oS.getBook();

    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.moveToBook(rangeData.book);
    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>
      

  2.   

    very good! 爱死楼上了！