【问题标题】:How to find the selection text beginning and end positions in Javascript?如何在Javascript中找到选择文本的开始和结束位置?
【发布时间】:2011-12-17 05:10:26
【问题描述】:

我正在尝试查找选择的文本开始和结束。所以,在下面的文本中,如果我从“你好,世界!天气真好!”中选择“世界!真好”,我应该得到 7 作为开始坐标,24 作为结束坐标,假设从零开始的索引。

这是如何实现的?

编辑: 我正在寻找不在任何 <input><textarea> 元素内的文本选择。

编辑: 决定使用禁用的解决方案<textarea>s

【问题讨论】:

    标签: javascript jquery html selection getselection


    【解决方案1】:

    我用这个:

    /* Returns 3 strings, the part before the selection, the part after the selection and the selected part */
    function getSelected()
    {
      var u     = editor.val();
      var start = editor.get(0).selectionStart;
      var end   = editor.get(0).selectionEnd;
    
      return [u.substring(0, start), u.substring(end), u.substring(start, end)];
    }
    

    编辑器在哪里 $("#editor") 或您的文本区域/输入字段可能具有的任何 ID。

    用法:

    var select = getSelected()
    editor.val(select[0] + '<h1>'+ select[2] + '</h1>' + select[1]);
    

    将在 H1 中换行选定的文本。如果未选择任何内容,它只会添加空 H1,但您可以根据自己的喜好添加检查和功能。

    ** 未在所有浏览器中测试,但可在 Chrome 中使用 **

    【讨论】:

    • 您是否看到我希望它在 DIV 和 Ps 中工作的编辑?我在您回答前 5 分钟对其进行了编辑,因此您可能没有看到它。这在 TEXTAREA 中工作正常,但当应用于 P 标签时,开始和结束是 undefined
    • 如果我从使用
      切换到禁用
    • 啊,很高兴我还能帮上忙 :)
    • 这在版本 9 以下的 IE 中不起作用,因为不支持 selectionStartselectionEndhelp.dottoro.com/ljtfkhio.php
    【解决方案2】:

    这对于contenteditable HTML 内容(与&lt;input&gt;&lt;textarea&gt; 元素中的文本相反)是可能的,但稍微复杂一些。这是一个简单的跨浏览器实现:

    https://stackoverflow.com/a/4812022/96100

    【讨论】:

      【解决方案3】:

      但我知道一个 jQuery 插件可以解决您的问题等等 - https://github.com/localhost/jquery-fieldselection

      【讨论】:

      • 这只适用于输入元素吗?我正在寻找 &lt;p&gt;&lt;div&gt; 标签内的文本
      猜你喜欢
      相关资源
      最近更新 更多
      热门标签