How to access the currently highlighted text within a in Javascript</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2021-01-23T22:47:40.650" class="fromnow">Jan 23 '21 at 22:47</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2021-01-24T00:38:50.450" datetime="2021-01-24T00:38:50.450">Jan 24 '21 at 00:38</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 505 times"> <span class="fc-light mr2">Viewed</span> 505 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="65865277" data-ownerid="8524840" data-score="3"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="65865277"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>The user will enter text into a HTML textarea on the page. When they highlight part of that text, how can I access the highlighted string? Are there any events triggered by highlighting of text in a textarea element?</p> <p>This is being done in the context of a react app where the textarea is a component.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/reactjs" class="post-tag js-gps-track" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 23 '21 at 22:47">asked Jan 23 '21 at 22:47</time> <a href="../../users/8524840/o-james" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/8524840.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="O James" /> </a> <div class="s-user-card--info"> <a href="../../users/8524840/o-james" class="s-user-card--link">O James</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">189</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="12 bronze badges">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-65865277" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="65865277" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-116454071" class="comment js-comment " data-comment-id="116454071" data-comment-owner-id="10071576" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment116454071_65865277"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Check [this](https://stackoverflow.com/questions/3731328/on-text-highlight-event) out</span> – <a href="../../users/10071576/eldshe" title="723 reputation" class="comment-user ">Eldshe</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/65865277/how-to-access-the-currently-highlighted-text-within-a-textarea-in-javascript#comment116454071_65865277"><span title="2021-01-23T23:00:15.400 License: CC BY-SA 4.0" class="relativetime-clean">Jan 23 '21 at 23:00</span></a></span> </div> </div> </li> <li id="comment-116454954" class="comment js-comment " data-comment-id="116454954" data-comment-owner-id="10638652" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment116454954_65865277"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">https://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text</span> – <a href="../../users/10638652/mario-abbruscato" title="819 reputation" class="comment-user ">Mario Abbruscato</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/65865277/how-to-access-the-currently-highlighted-text-within-a-textarea-in-javascript#comment116454954_65865277"><span title="2021-01-24T00:11:07.003 License: CC BY-SA 4.0" class="relativetime-clean">Jan 24 '21 at 00:11</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="65866060"></a> <div id="answer-65866060" class="answer " data-answerid="65866060" data-ownerid="1533592" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="65866060"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Create a function that takes the value of your text area and gets the start and end using <code>el.selectionStart</code> and <code>el.selectionEnd</code>, then use <code>el.substring()</code> to get the selected text within the defined constraints for <em><strong>start</strong></em> and <em><strong>end</strong></em>.</p> <p>Lastly, run the function within an eventlistener that is listening to the text areas <code>select</code> event.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>let textArea = document.getElementById('textArea') let display = document.getElementById('display') let getSelectedText = () => { let selectedText = textArea.value let selStart = textArea.selectionStart let selEnd = textArea.selectionEnd return selectedText.substring(selStart, selEnd) } textArea.addEventListener('select', () => { display.innerHTML = `<b>Your selected text is:</b> <i>${getSelectedText()}</i>` })</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id='textArea' rows="7" cols="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea> <div id="display"></div></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 24 '21 at 00:38">answered Jan 24 '21 at 00:38</time> <a href="../../users/1533592/dale-landry" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1533592.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="dale landry" /> </a> <div class="s-user-card--info"> <a href="../../users/1533592/dale-landry" class="s-user-card--link">dale landry</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,831</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="16 silver badges">16</li> <li class="s-award-bling s-award-bling__bronze" title="28 bronze badges">28</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>