获取TextArea中已选中文本在整个文本串中的索引

最新推荐文章于 2023-12-22 07:59:08 发布

原创最新推荐文章于 2023-12-22 07:59:08 发布 · 4.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#textbox #character #firefox #button #ie

JS&HTML&CSS 专栏收录该内容

34 篇文章

订阅专栏

在坛子里看到有人提出如何获取TextArea中选中的文本在整个文本串中的索引或者如何获取未选中文本的问题。我们知道通过document.selection.createRange().text方式能够获取当前选中的文本，但获取选中的这个文本在整个文本串中的起始位置却是有一点难度。已开始想到用indexOf()方法来解决问题，但立即被否决了，因为这种方式没有考虑到TextArea中有重复文本串的问题，所以indexOf()的结果不是绝对准确的。

其间有个另外的问题，即想在选中后马上响应一个事件。开始准备用TextArea的onselect事件来响应处理，虽然网上查得资料说onselect是在mouseUp后才fire的，但在我的试验中它在MouseUp之前就fire了，所以通常只选择了第一个字符就触发了这个事件（没有深入证实这个问题）。而onselectstart更是在MouseDown后马上就fire了。所以要解决这个问题还是得自己在MouseDown,MouseUp及MouseMove事件中见来协调判断了。

通过网上找到另外一位高人写的帖子，我抄袭一下解决了题中所述问题，附代码如下：

<html>
    <head>
    <title>TEST</title>
    
    <script type="text/javascript">    
        
        function savePos(textBox)
        {
            var start = 0
            var end = 0
                    
            var range = document.selection.createRange();
            
            if(range.parentElement().id == textBox.id)
            {                
                var range_all = document.body.createTextRange();
                range_all.moveToElementText(textBox);                
                
                for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
                    range_all.moveStart('character', 1);                    
                for (var i = 0; i <= start; i ++)
                {
                    if (textBox.value.charAt(i) == '/n')
                        start++;
                }
                                
                var range_all = document.body.createTextRange();
                range_all.moveToElementText(textBox);                
                
                for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
                    range_all.moveStart('character', 1);                     
                 
                 for (var i = 0; i <= end; i ++)
                 {
                     if (textBox.value.charAt(i) == '/n')
                         end ++;
                 }
               }
               
            document.getElementById("start").innerText = start;
            document.getElementById("end").innerText = end;
            
            //Unselected Text
            var preText = textBox.value.substr(0,start)
            var endText = textBox.value.substr(end)
            document.getElementById("unSelectedText").innerHTML = preText + (end>start? "<font color=red><b>{SELECTED TEXT}</b></font>" : "") + endText
        }
    </script>
    </head>
    <body>
    
        <textarea id="ta" onmousedown="savePos(this)" onmouseup="savePos(this)"  rows="14" cols="50">textarea中有一段文本串，onselect的时候，如何取得选中文本在整个文本串中的索引（选中串的起始位置索引）？谢谢！</textarea>
         
         <p>
            Start Index : <span id="start"></span>
         </p>
         
         <p>
            End Index : <span id="end"></span>
         </p>
         
         <p>
            UnSelected Text : <span id="unSelectedText"></span>
         </p>
                
    
    </body>
</html>

同时附上那位高人的原代码，并表示敬意：

<html>
    <head>
    <title>TEST</title>
    <style>
        body,td{ font-family: verdana, arial, helvetica, sans-serif;font-size: 12px; }
    </style>
    
    <script type="text/javascript">
        var start=0;
        var end=0;
        
        function add()
        {
            var textBox = document.getElementById("ta");
            var pre = textBox.value.substr(0, start);
            var post = textBox.value.substr(end);
            textBox.value = pre + document.getElementById("inputtext").value + post;
        }
        
        function savePos(textBox)
        {
            //如果是Firefox(1.5)的话，方法很简单
            if(typeof(textBox.selectionStart) == "number")
            {
                start = textBox.selectionStart;
                end = textBox.selectionEnd;
            }
            
            //下面是IE(6.0)的方法，麻烦得很，还要计算上'/n'
            else if(document.selection)
            {
                var range = document.selection.createRange();
                
                if(range.parentElement().id == textBox.id)
                {
                    // create a selection of the whole textarea
                    var range_all = document.body.createTextRange();
                    range_all.moveToElementText(textBox);
                    
                    //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)
                    //range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则                
                    //返回小于0的值，则range_all往右移一点，直到两个range的start相同。
                    // calculate selection start point by moving beginning of range_all to beginning of range
                    for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
                        range_all.moveStart('character', 1);
                        
                    // get number of line breaks from textarea start to selection start and add them to start
                    // 计算一下/n
                    for (var i = 0; i <= start; i ++)
                    {
                        if (textBox.value.charAt(i) == '/n')
                            start++;
                    }
                    
                    // create a selection of the whole textarea
                    var range_all = document.body.createTextRange();
                    range_all.moveToElementText(textBox);
                    
                    // calculate selection end point by moving beginning of range_all to end of range
                    for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
                        range_all.moveStart('character', 1);
                         
                     // get number of line breaks from textarea start to selection end and add them to end
                     for (var i = 0; i <= end; i ++)
                     {
                         if (textBox.value.charAt(i) == '/n')
                             end ++;
                     }
                   }
                }
            document.getElementById("start").value = start;
            document.getElementById("end").value = end;
        }
    </script>
    </head>
    <body>
    
    <form action="a.cgi">
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>start: <input type="text" id="start" size="3"/></td>
                <td>end: <input type="text" id="end" size="3"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <textarea id="ta" onKeydown="savePos(this)" 
                                      onKeyup="savePos(this)" 
                                      onmousedown="savePos(this)" 
                                      onmouseup="savePos(this)" 
                                      onfocus="savePos(this)" 
                                      rows="14" cols="50"></textarea>
                </td>
            </tr>
            <tr>
                <td><input type="text" id="inputtext" /></td>
                <td><input type="button" onClick="add()" value="Add Text"/></td>
            </tr>
        </table>
    </form>
    </body>
</html>