如何在textarea中获取选定的文本？ [复制]

Posted 2023-03-06

【中文标题】如何在textarea中获取选定的文本？ [复制]

【英文标题】：How to get selected text in textarea? [duplicate]

【发布时间】：2010-10-17 13:30:50

【问题描述】：

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

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

我正在使用 jQuery。

【问题讨论】：

看看这个问题：***.com/questions/401593/…

【参考方案1】：

试试 jquery-fieldselection 插件。

您可以从here 下载它。也有例子。

【讨论】：

在 Internet Explorer 7 中不适合我。

该插件中的函数replaceSelection 在 Chrome 和 Firefox 中对我不起作用。

【参考方案2】：

getSelection()

这会因浏览器而有所不同，请参阅此处了解据称在大多数情况下都可以使用的功能： http://snipplr.com/view/775/getselection/

【讨论】：

如何在特定的textarea 元素上使用此功能？

以上代码在火狐浏览器（61.0.1）中不起作用@tpdi

【参考方案3】：

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

var userSelection;
if (window.getSelection) 
    userSelection = window.getSelection();

else if (document.selection)  // Opera
    userSelection = document.selection.createRange();

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

您现在拥有的范围对象类型取决于浏览器。对于 IE，它是一个 Text Range 对象；对于其他人，它是一个选择对象。要将 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);

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

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

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

【讨论】：

非常有用且内容丰富的答案。

【参考方案4】：

window.getSelection().toString() 为我使用 Chrome，但 not Firefox。

使用 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

您也可以使用activeElement 代替getElementById。

参考：

textarea document

【讨论】：

window.getSelection().toString() 做同样的事情，你不需要知道 textarea 的 id。您不能同时在不同的文本区域中进行多项选择。

@DanDascalescu 我之前和现在都试过了。它适用于 Chrome，但似乎不适用于 FireFox。

正确 - 原来 there is a Firefox bug filed in 2001 关于 window.getSelection() 在 textareas 中不起作用！

确实，Firefox 中存在一个错误，该错误早在 2001 年就已提交（！）。我在my answer 中提到过。

【参考方案5】：

一个小函数，它将获取文本区域或输入元素的选定字符串/文本：

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。

【讨论】：

请举个例子。

我喜欢将任何元素传递给你的函数的能力，它使它更便携/可重用。

【参考方案6】：

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

【讨论】：

此代码不正确。确实它给了我整个文本区域而不是选定的文本。