Selecting text in an element akin to highlighting with your mouse

Question

I would like to have users click a link  then it selects the HTML text in another element  not an input    By  select  I mean the same way you would select text by dragging your mouse over it  This has been a bear to research because everyone talks about  select  or  highlight  in other terms   Is this possible  My code so far   HTML    lt a href  javascript   onclick  SelectText  xhtml-code    gt Select Code lt  a gt   lt code id  xhtml-code  gt Some Code here  lt  code gt    JS   function SelectText element                element  select        Am I missing something blatantly obvious

User · Answer

My particular use-case was selecting a text range inside an editable span element, which, as far as I could see, is not described in any of the answers here.

The main difference is that you have to pass a node of type Text to the Range object, as described in the documentation of Range.setStart():

If the startNode is a Node of type Text, Comment, or CDATASection, then startOffset is the number of characters from the start of startNode. For other Node types, startOffset is the number of child nodes between the start of the startNode.

The Text node is the first child node of a span element, so to get it, access childNodes[0] of the span element. The rest is the same as in most other answers.

Here a code example:

var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];

var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

Other relevant documentation:
Range
Selection
Document.createRange()
Window.getSelection()

User · Answer

An Updated version that works in chrome   function SelectText element        var doc   document      var text   doc getElementById element           if  doc body createTextRange       ms         var range   doc body createTextRange            range moveToElementText text           range select          else if  window getSelection            var selection   window getSelection            var range   doc createRange            range selectNodeContents text           selection removeAllRanges            selection addRange range               function            p   click function             SelectText  selectme                   http   jsfiddle net KcX6A 326

User · Answer

This thread  dead now  contains really wonderful stuff  But I m not able to do it right on this page using FF 3 5b99   FireBug due to  quot Security Error quot   Yipee   I was able to select whole right hand sidebar with this code hope it helps you      var r   document createRange        var w document getElementById  quot sidebar quot          r selectNodeContents w         var sel window getSelection         sel removeAllRanges         sel addRange r     PS - I was not able to use objects returned by jquery selectors like    var w    quot div welovestackoverflow quot     quot div sidebar quot              this throws   security exception       r selectNodeContents w

User · Answer

lepe - That works great for me thanks  I put your code in a plugin file  then used it in conjunction with an each statement so you can have multiple pre tags and multiple  Select all  links on one page and it picks out the correct pre to highlight    lt script type  text javascript  src     js jquery selecttext js  gt  lt  script gt   lt script type  text javascript  gt      document  ready function                  selectText   each function indx                      this  click function                                             pre   eq indx  selText   addClass  selected                            return false

User · Answer

I liked lepe s answer except for a few things    Browser-sniffing  jQuery or no isn t optimal DRY Doesn t work in IE8 if obj s parent doesn t support createTextRange Chrome s ability to use setBaseAndExtent should be leveraged  IMO  Will not select text spanning across multiple DOM elements  elements within the  selected  element    In other words if you call selText on a div containing multiple span elements  it will not select the text of each of those elements   That was a deal-breaker for me  YMMV    Here s what I came up with  with a nod to lepe s answer for inspiration  I m sure I ll be ridiculed as this is perhaps a bit heavy-handed  and actually could be moreso but I digress   But it works and avoids browser-sniffing and that s the point   selectText function         var range          selection          obj   this 0           type                 func  function               obj  object                        Convenience         is   function type  o               return typeof o     type                  if is type obj  obj ownerDocument           amp  amp  is type obj  obj ownerDocument defaultView           amp  amp  is type func  obj ownerDocument defaultView getSelection             selection   obj ownerDocument defaultView getSelection             if is type func  selection setBaseAndExtent                   Chrome  Safari - nice and easy             selection setBaseAndExtent obj  0  obj    obj  contents   size                       else if is type func  obj ownerDocument createRange                 range   obj ownerDocument createRange                 if is type func  range selectNodeContents                   amp  amp  is type func  selection removeAllRanges                   amp  amp  is type func  selection addRange                       Mozilla                 range selectNodeContents obj                   selection removeAllRanges                    selection addRange range                                     else if is type obj  document body   amp  amp  is type obj  document body createTextRange              range   document body createTextRange             if is type obj  range moveToElementText   amp  amp  is type obj  range select                   IE most likely             range moveToElementText obj               range select                            Chainable     return this      That s it   Some of what you see is the for readability and or convenience   Tested on Mac in latest versions of Opera  Safari  Chrome  Firefox and IE   Also tested in IE8   Also I typically only declare variables if when needed inside code blocks but jslint suggested they all be declared up top   Ok jslint   Edit I forgot to include how to tie this in to the op s code   function SelectText element                element  selectText        Cheers

User · Answer

Have a look at the Selection object  Gecko engine  and the TextRange object  Trident engine   I don t know about any JavaScript frameworks that have cross-browser support for this implemented  but I ve never looked for it either  so it s possible that even jQuery has it

User · Answer

You can use the following function to select content of any element   jQuery fn selectText   function        this find  input   each function             if   this  prev   length    0       this  prev   hasClass  p copy                       lt p class  p copy  style  position  absolute  z-index  -1   gt  lt  p gt    insertBefore   this                        this  prev   html   this  val                 var doc   document      var element   this 0       console log this  element       if  doc body createTextRange            var range   document body createTextRange            range moveToElementText element           range select          else if  window getSelection            var selection   window getSelection                    var range   document createRange            range selectNodeContents element           selection removeAllRanges            selection addRange range              This function can be called as follows       selectme   selectText

User · Answer

For any tag one can select all text inside that tag by this short and simple code  It will highlight the entire tag area with yellow colour and select text inside it on single click   document onclick   function event        var range  selection  event target style backgroundColor    yellow           selection   window getSelection            range   document createRange            range selectNodeContents event target           selection removeAllRanges            selection addRange range

User · Answer

Here s a version with no browser sniffing and no reliance on jQuery   function selectElementText el  win        win   win    window      var doc   win document  sel  range      if  win getSelection  amp  amp  doc createRange            sel   win getSelection            range   doc createRange            range selectNodeContents el           sel removeAllRanges            sel addRange range         else if  doc body createTextRange            range   doc body createTextRange            range moveToElementText el           range select             selectElementText document getElementById  someElement     selectElementText elementInIframe  iframe contentWindow

User · Answer

According to the jQuery documentation of select         Trigger the select event of each matched element  This causes all of the functions that have been bound to that select event to be executed  and calls the browser s default select action on the matching element s     There is your explanation why the jQuery select   won t work in this case

User · Answer

Plain Javascript   x000D   x000D  function selectText node    x000D      node   document getElementById node   x000D   x000D      if  document body createTextRange    x000D          const range   document body createTextRange    x000D          range moveToElementText node   x000D          range select    x000D        else if  window getSelection    x000D          const selection   window getSelection    x000D          const range   document createRange    x000D          range selectNodeContents node   x000D          selection removeAllRanges    x000D          selection addRange range   x000D        else   x000D          console warn  Could not select text in node  Unsupported browser     x000D        x000D    x000D   x000D  const clickable   document querySelector   click-me    x000D  clickable addEventListener  click        gt  selectText  target     x000D   lt div id  target  gt  lt p gt Some text goes here  lt  p gt  lt p gt Moar text  lt  p gt  lt  div gt  x000D   lt p class  click-me  gt Click me  lt  p gt  x000D   x000D   x000D    Here is a working demo  For those of you looking for a jQuery plugin  I made one of those too     jQuery  original answer   I have found a solution for this in this thread  I was able to modify the info given and mix it with a bit of jQuery to create a totally awesome function to select the text in any element  regardless of browser   function SelectText element        var text   document getElementById element       if    browser msie            var range   document body createTextRange            range moveToElementText text           range select          else if    browser mozilla      browser opera            var selection   window getSelection            var range   document createRange            range selectNodeContents text           selection removeAllRanges            selection addRange range         else if    browser safari            var selection   window getSelection            selection setBaseAndExtent text  0  text  1

User · Answer

Jason s code can not be used for elements inside an iframe  as the scope differs from window and document   I fixed that problem and I modified it in order to be used as any other jQuery plugin  chainable    Example 1  Selection of all text inside  lt  code   tags with single click and add class  selected      function            code   click function               this  selText   addClass  selected                  Example 2  On button click  select an element inside an Iframe     function            button   click function                iframe   contents   find   selectme   selText                  Note  remember that the iframe source should reside in the same domain to prevent security errors   jQuery Plugin   jQuery fn selText   function         var obj   this 0       if    browser msie            var range   obj offsetParent createTextRange            range moveToElementText obj           range select          else if    browser mozilla      browser opera            var selection   obj ownerDocument defaultView getSelection            var range   obj ownerDocument createRange            range selectNodeContents obj           selection removeAllRanges            selection addRange range         else if    browser safari            var selection   obj ownerDocument defaultView getSelection            selection setBaseAndExtent obj  0  obj  1             return this      I tested it in IE8  Firefox  Opera  Safari  Chrome  current versions   I m not sure if it works in older IE versions  sincerely I don t care

User · Answer

Added jQuery browser webkit to the  else if  for Chrome  Could not get this working in Chrome 23    Made this script below for selecting the content in a  lt pre gt  tag that has the class  code    jQuery  document   ready function         jQuery  pre code   attr  title    Click to select all        jQuery    divFoo    click  function             var refNode   jQuery  this   0           if   jQuery browser msie                 var range   document body createTextRange                range moveToElementText  refNode                range select              else if   jQuery browser mozilla    jQuery browser opera     jQuery browser webkit                 var selection   refNode ownerDocument defaultView getSelection                console log selection               var range   refNode ownerDocument createRange                range selectNodeContents  refNode                selection removeAllRanges                selection addRange  range              else if   jQuery browser safari                 var selection   refNode ownerDocument defaultView getSelection                selection setBaseAndExtent  refNode  0  refNode  1

User · Answer

Tim s method works perfectly for my case - selecting the text in a div for both IE and FF after I replaced the following statement   range moveToElementText text     with the following   range moveToElementText el     The text in the div is selected by clicking it with the following jQuery function     function              divFoo   click function              selectElementText document getElementById  divFoo

User · Answer

here is another simple solution to get the selected the text in the form of string  you can use this string easily to append a div element child into your code   var text        if  window getSelection        text   window getSelection       else if  document getSelection        text   document getSelection       else if  document selection        text   document selection createRange   text     text   text toString

User · Answer

I was searching for the same thing  my solution was this       el-id   focus   select

[javascript] Selecting text in an element (akin to highlighting with your mouse)

Examples related to javascript

Examples related to jquery