在Javascript中定位突出显示的文本 [英] Targeting highlighted text in Javascript

问题描述

寻找一种方法来定位所选文本并在Javascript中对其执行操作。我应该使用什么样的方法？这是jQuery的工作吗？非常感谢！

Looking for a method to target selected text and perform an action on it in Javascript. What kind of methods should I be using? Is this a job for jQuery? Thanks so much!

编辑：早期的答案都是针对CSS类的。我正在寻找点击和突出显示/选择文本，然后在JS中采取行动。谢谢！

编辑2：我被要求提供此功能的示例。 这是，但代码的评论很差。让我知道你的想法。

EDIT 2: I've been asked for an example of this function. Here's one but the code has poor reviews. Let me know what you think.

推荐答案

编写跨浏览器非常困难，通用获得选择文字功能。如果您可以限制您的要求仅说明在页面中选择的文本，那么生活就会更简单。

It is quite difficult to write a cross browser, generic "get selected text" function. If you can limit your requirements to say only text selected in a page, then life is simpler.

但是如果你想从任何地方（内部表格控件，按钮标签，一般文本）中选择文本，那么生活就很艰难。

But if you want to be able to get text selections from anywhere (inside form controls, button labels, general text), then life is tough.

这是我前一段时间写的一个函数，它适用于它所用的应用程序：

Here's a function I wrote some time ago, it worked well enough for the application it was used in:

/* 
 *  This function returns the selected text in a document.
 *  If no text selected, returns an empty string.
 *
 *  Call on one of the following events: 
 *
 *     mouseup - most appropriate event
 *               for selection by mousedown, drag to select, mouseup
 *               may select only whitespace
 *
 *    dblclick - not as appropriate as mouseup
 *               for selection of word by double click
 *               may select only whitespace
 *
 *  Note that text can be selected in ways that do not dispatch
 *  an event, e.g. selecting all the text in the document using:
 *     ctrl + a
 *     context menu -> Select All
 *     edit menu -> Select All
 *     programmatically selecting text
 */
function checkForSelectedText(e) {
  var e = e || window.event;
  var el = e.target || e.srcElement;
  var tagName = el.tagName && el.tagName.toLowerCase();
  var t;
  var d = document;

  // Try DOM 2 Range - for most browsers, including IE 6+
  // However, doesn't get text selected inside form controls
  // that allow selection of text content (input type text, 
  // textarea)
  if (d && d.selection && d.selection.createRange) {
    t = d.selection.createRange().text;

  // Otherwise try HTML5 - note that getSelection returns
  // a string with extra properties. This may also get
  // text within input and textarea
  } else if (d.getSelection) {
    t = d.getSelection();
  }

  // If didn't get any text, see if event was inside
  // inupt@type=text or textarea and look for text
  if (t == '') {
    if (tagName == 'textarea' || 
       (tagName == 'input' && el.type == 'text')) {

     // Check selectionStart/End as otherwise if no text
     // selected, IE returns entire text of element
     if (typeof el.selectionStart == 'number' && 
         el.selectionStart != el.selectionEnd) {
        t = el.value.substring(el.selectionStart, el.selectionEnd)
     }
    }
  }
  return t;
}

这篇关于在Javascript中定位突出显示的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！