如何在textarea中获取所选文本？

Question

我正在尝试创建自己的 WYSIWYG 编辑器。有什么办法，如何获取用户在textarea中选择的文本？

例如，如果用户选择了某个单词然后单击按钮，我该如何找出选择了哪个文本？

我正在使用 jQuery 。

Answer 1

使用Firefox获取<textarea>中的选定内容：

function getSel() // javascript
{
    // obtain the object reference for the <textarea>
    var txtarea = document.getElementById("mytextarea");
    // obtain the index of the first selected character
    var start = txtarea.selectionStart;
    // obtain the index of the last selected character
    var finish = txtarea.selectionEnd;
    // obtain the selected text
    var sel = txtarea.value.substring(start, finish);
    // do something with the selected content
}

window.getSelection().toString()适用于Chrome，但不支持Firefox。

参考：

• textarea
• document

Answer 2

不同浏览器的处理选择不同：

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // Opera
    userSelection = document.selection.createRange();
}

这会给你一个范围对象。每个范围代表一个选择（使用控制/命令键可以进行多个活动选择）。

您现在拥有的范围对象的类型取决于浏览器。对于IE，它是一个Text Range对象;对于其他人来说是一个Selection对象。要将Selection对象转换为文本范围，可以调用getRangeAt;对于Safari，您需要构建：

var range;
if (userSelection.getRangeAt)
    range = userSelection.getRangeAt(0);
else { // Safari
    range = document.createRange();
    range.setStart(userSelection .anchorNode, userSelection.anchorOffset);
    range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}

range对象为您提供选择的起始和结束dom元素以及文本偏移量。

有关范围对象的更多信息，请访问quirksmode.org here

如果您使用的是jQuery，您可能需要查看Batiste Bieler的light weight jQuery RTE Plugin。它可能足以满足您的需求，或者至少可以为您提供一些开始。

Answer 3

尝试使用jquery-fieldselection插件。

您可以从here下载。还有一个例子。

Answer 4

getSelection（）

浏览器略有不同，请参阅此处了解最多可以使用的功能： http://snipplr.com/view/775/getselection/

Answer 5

一个小函数，它将获取textarea或input元素的选定字符串/文本：

function getInputSelection(elem){
 if(typeof elem != "undefined"){
  s=elem[0].selectionStart;
  e=elem[0].selectionEnd;
  return elem.val().substring(s, e);
 }else{
  return '';
 }
}

请注意，上述代码需要 jQuery 才能正常工作。获取id abc123

的输入元素的选定字符串的示例

getInputSelection($("#abc123"));

上述函数将返回所选字符串。如果用户没有选择任何字符串，它将返回null。

更多例子

getInputSelection($("body").find("input[name=user]"));

在使用类名选择的元素上，返回元素数组的第一个元素的选定字符串，而不是所有元素的选定字符串。毕竟，页面中的选择始终为 1 。

Answer 6

function getSel() {
var input = $("#text");
return input.html().toString().substring(getSelection().baseOffset,getSelection().extendOffset);
}