如何用Javascript获取选择文本（加强版）

直接用例子说话：<body>
<div id="TextEara">
     <p>这是一条测试字符串</p>
</div>
</body>用鼠标选择“测试”
1、得到“条测试字”，就是对原来的选择文本的范围向左右各扩展一个（多个）字符；
2、得到“测试”所在的索引号（位置），这里返回4；
3、得到DOM路径，这里返回“<body><div><p>”如果要用JS库的话，希望能选用jQuery。
谢谢各位大侠了！！

解决方案 »

  1.   


    <body> <div id="TextEara">  <p>这是一条测试字符串</p> </div> 
    </body>
    <script>
    document.body.onmouseup = function(e){
    var e=window.event
    var t
    var s=e.srcElement
    var b, e
    var r = document.selection.createRange()
    b = 0 - r.duplicate().moveStart('character', -100000)
    e = b + r.text.length
    t = s.innerText.substr(b-1,e-b+2)+"\n"
    t += b+"\n"
    var p = s
    s = "<"+p.nodeName+">"
    do
    {
    p = p.parentElement
    if(!p)break;
    s = "<"+p.nodeName+">"+s
    }
    while(p.nodeName!="BODY")
    t += s
    alert(t)
    }
    </script>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    var rg = {};
    rg.getText = function(id, lmove, rmove) {
    var o = document.getElementById(id).getElementsByTagName('p')[0];
    if(window.getSelection) {
    var range =  window.getSelection().getRangeAt(0), start = range.startOffset,
    end = range.endOffset, html = o.innerHTML.substring(start - lmove, end + rmove);
    return  '索引位置: ' + start + ' 扩展后字符: ' + html;
    } else {
    var range = document.selection.createRange(), txt = range.text;
    range.moveStart('character', -lmove);
    range.moveEnd('character', rmove);
    return  '索引位置: ' + o.innerHTML.search(new RegExp(txt)) + '扩展后字符: ' + range.text;
    }
    }; rg.getPath = function() {
    var tbl = [];
    var direct = (document.selection && document.selection.createRange)
    ? document.selection.createRange().parentElement()
    : window.getSelection().focusNode.parentNode;
    do {
    tbl.push(direct.tagName);
    }
    while ((direct = direct.parentNode) && (direct != document.documentElement))
    return tbl.reverse().join('---->');
    };</script>
    </head>
    <body>
    <div id="TextEara">
    <p>这是一条测试字符串</p>
    </div>
    <input type="button" value="getText" onclick="alert(rg.getText('TextEara', 1, 1));" />
    <input type="button" value="getPath" onclick="alert(rg.getPath());" />
    </body>
    </html>
      

  3.   


    <body>
    <div id="TextEara">
         <p>这是一条测试字符串就是对原来的选择文本的范围向左右各扩展</p>
    </div>
    </body><script type=text/javascript>
    function $(o){
         return document.getElementById(o) || o
    }
    $("TextEara").onmouseup = function(){
         var x, y, n = 2, str = $("TextEara").innerHTML.replace(/<[^>]*>|[\n|\s]*/g,"");
         !! window.getSelection ? get(window.getSelection().toString()) : get(document.selection.createRange().text);
         function get(sel){
                  var re1 = new RegExp("^[^^]*([^^]{"+n+"}"+sel+"[^^]{"+n+"})[^$]*$", "g");
                  alert(str.replace(re1, "$1"));  //第一问
                  alert(str.indexOf(sel));        //第二问
         }
    } 
    </script>第三问在思考中...
      

  4.   

    <body>
    <div id="TextEara">
         <p>这是一条测试字符串就对原来的选择文本的范围向左右各扩展</p>
    </div>
    </body><script type=text/javascript>
    function $(o){
         return document.getElementById(o) || o
    }
    $("TextEara").onmouseup = function(){
         var x, y, n = 2, str = $("TextEara").innerHTML.replace(/<[^>]*>|[\n|\s]*/g,"");
         !! window.getSelection ? get(window.getSelection().toString()) : get(document.selection.createRange().text);
         function get(sel){
                  var reg = new RegExp("^[^^]*([^^]{"+n+"}"+sel+"[^^]{"+n+"})[^^]*$", "g");
                  alert(reg.test(str) && str.replace(reg, "$1") || "选择扩展超出边界！");  //第一问
                  alert(str.indexOf(sel));                                                 //第二问
         }
    } 
    </script>
    第三问仍在思考中...
      

  5.   

    再次修正：<body>
    <div id="TextEara">
         <p>这是一条测试字符串就对原来的选择文本的范围向左右各扩展</p>
    </div>
    </body><script type=text/javascript>
    function $(o){
         return document.getElementById(o) || o
    }
    $("TextEara").onmouseup = function(){
         var x, y, n = 2, str = $("TextEara").innerHTML.replace(/<[^>]*>|[\n|\s]*/g,"");
         !! window.getSelection ? get(window.getSelection().toString()) : get(document.selection.createRange().text);
         function get(sel){
                  var reg = new RegExp("^[^^]*(([^^]{"+n+"}|^.*)"+sel+"([^^]{"+n+"}|.*$))[^^]*$", "g");
                  alert(str.replace(reg, "$1"));  //第一问，如果选择扩展超出边界有多少个扩多少个
                  alert(str.indexOf(sel));        //第二问
         }
    } 
    </script>