Find value of current line of a using 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="2010-06-30T22:53:49.857" class="fromnow">Jun 30 '10 at 22:53</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2022-01-15T08:39:14.740" datetime="2022-01-15T08:39:14.740">Jan 15 '22 at 08:39</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 5,858 times"> <span class="fc-light mr2">Viewed</span> 5,858 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="3153995" data-ownerid="271561" data-score="2"> <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="3153995"> <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> <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>How can I find the value of the current line of a textarea?</p> <p>I know I have to find the caret position, but then find everything before it up to the last \n and everything after it to the next \n.</p> <p>How can I do this?</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/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> <a href="../../questions/tagged/newline" class="post-tag js-gps-track" title="show questions tagged 'newline'" rel="tag">newline</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 grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Nov 08 '11 at 19:59">edited Nov 08 '11 at 19:59</time> <a href="../../users/19212/brian-m-hunt" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/19212.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Brian M. Hunt" /> </a> <div class="s-user-card--info"> <a href="../../users/19212/brian-m-hunt" class="s-user-card--link">Brian M. Hunt</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">81,008</li> <li class="s-award-bling s-award-blinggold" title="74 gold badges">74</li> <li class="s-award-bling s-award-blingsilver" title="230 silver badges">230</li> <li class="s-award-bling s-award-blingbronze" title="343 bronze badges">343</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 30 '10 at 22:53">asked Jun 30 '10 at 22:53</time> <a href="../../users/271561/luke-burns" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/271561.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Luke Burns" /> </a> <div class="s-user-card--info"> <a href="../../users/271561/luke-burns" class="s-user-card--link">Luke Burns</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,911</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="24 silver badges">24</li> <li class="s-award-bling s-award-blingbronze" title="30 bronze badges">30</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </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">3 Answers<span style="display:none;" itemprop="answerCount">3</span></h2> </div> </div> </div> <a name="3154018"></a> <div id="answer-3154018" class="answer accepted-answer" data-answerid="3154018" data-ownerid="9021" data-score="6" itemprop="acceptedAnswer" 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="3154018"> <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="6">6</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>A simple way would be to just loop:</p> <pre><code>var caretPos = 53, // however you get it start, end ; for (start = caretPos; start >= 0 && myString[start] != "\n"; --start); for (end = caretPos; end < myString.length && myString[end] != "\n"; ++end); var line = myString.substring(start + 1, end - 1); </code></pre></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="user-info "> <div class="user-action-time">edited <span title="2010-07-01T09:10:12.123" class="relativetime">Jul 01 '10 at 09:10</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">nickf</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 30 '10 at 22:58">answered Jun 30 '10 at 22:58</time> <a href="../../users/9021/nickf" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9021.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="nickf" /> </a> <div class="s-user-card--info"> <a href="../../users/9021/nickf" class="s-user-card--link">nickf</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">537,072</li> <li class="s-award-bling s-award-blinggold" title="198 gold badges">198</li> <li class="s-award-bling s-award-blingsilver" title="649 silver badges">649</li> <li class="s-award-bling s-award-blingbronze" title="721 bronze badges">721</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="8045242"></a> <div id="answer-8045242" class="answer " data-answerid="8045242" data-ownerid="19212" data-score="3" 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="8045242"> <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> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>In line with nickf's answer, the following example (which uses jQuery) may be a bit faster because it uses <code>(lastI|i)ndexOf</code>:</p> <pre><code>function current_line(textarea) { var $ta = $(textarea), pos = $ta.getSelection().start, // fieldselection jQuery plugin taval = $ta.val(), start = taval.lastIndexOf('\n', pos - 1) + 1, end = taval.indexOf('\n', pos); if (end == -1) { end = taval.length; } return taval.substr(start, end - start); } </code></pre> <p>Here it is <a class="external-link" href="http://jsfiddle.net/XGvn5/1/" rel="nofollow">on jFiddle</a>.</p></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 Nov 08 '11 at 02:22">answered Nov 08 '11 at 02:22</time> <a href="../../users/19212/brian-m-hunt" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/19212.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Brian M. Hunt" /> </a> <div class="s-user-card--info"> <a href="../../users/19212/brian-m-hunt" class="s-user-card--link">Brian M. Hunt</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">81,008</li> <li class="s-award-bling s-award-blinggold" title="74 gold badges">74</li> <li class="s-award-bling s-award-blingsilver" title="230 silver badges">230</li> <li class="s-award-bling s-award-blingbronze" title="343 bronze badges">343</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-8045242" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="8045242" 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-39256695" class="comment js-comment " data-comment-id="39256695" data-comment-owner-id="102635" 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="comment39256695_8045242"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks for the indexOf approach!</span> – <a href="../../users/102635/kirk-ouimet" title="27,280 reputation" class="comment-user ">Kirk Ouimet</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/3153995/find-value-of-current-line-of-a-textarea-using-javascript#comment39256695_8045242"><span title="2014-08-08T15:09:44.820 License: CC BY-SA 3.0" class="relativetime-clean">Aug 08 '14 at 15:09</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="70660380"></a> <div id="answer-70660380" class="answer " data-answerid="70660380" data-ownerid="3736602" data-score="0" 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="70660380"> <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="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>How about a one-liner :)</p> <p>// after getting a textarea into el</p> <p><del>sLine = el.value.substring(el.value.lastIndexOf('\n', el.selectionStart -1) + 1, ((end = el.value.indexOf('\n', el.selectionStart) - 1) => end > -1 ? end : undefined)());</del></p> <p>This works because <code>substring</code> gives everything after start when end is undefined.</p> <p>Start works nicely because <code>lastIndexOf</code> returns <code>-1</code> when selection is on the first line and \n is not found. Since we are already adding 1 for a found result that gets us to 0.</p> <p>End is trickier. To get an undefined when \n is not found so that the rest of the string is returned, a self-executing (<a href="../../questions/8228281/what-is-the-function-construct-in-javascript">IIEF</a>) arrow function works.</p> <p>Ackk, edge cases! lastIndexOf fails because for some reason it treats a start of <code>-1</code> as zero instead of just returning -1 so if the selection start is on the first line and it's a blank line lastIndexOf finds the new line character at zero then when we add 1, <code>'\n'.substring(1,0) // ='\n'</code> The above and previous answers to this question here give the first line as '\n' instead of the empty string. To handle that edge case <code>slice</code> works:</p> <pre class="lang-js prettyprint-override"><code>// after getting a textarea into el sline = el.value.slice(el.value.lastIndexOf('\n', el.selectionStart - 1) + 1, ((end = el.value.indexOf('\n', el.selectionStart)) => end > -1 ? end : undefined)()); </code></pre> <p></p><div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function getTextAreaCurrentLine(el) { let line = ''; if (el instanceof HTMLTextAreaElement) { // unlike substring, slice gives empty string when (1,0) line = el.value.slice(el.value.lastIndexOf('\n', el.selectionStart - 1) + 1, ((end = el.value.indexOf('\n', el.selectionStart)) => end > -1 ? end : undefined)()); } document.getElementById('result').innerHTML = '"'+line+'"'; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id="ta" type="text" spellcheck="false" rows="8" cols="40" autocomplete="off" >

The first line was empty
Three
Quatro

Fin.</textarea> <button id="get-line" onclick="getTextAreaCurrentLine(document.getElementById('ta'))">Get line</button> <br> <pre id="result"></pre></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="user-info "> <div class="user-action-time">edited <span title="2022-01-15T08:39:14.740" class="relativetime">Jan 15 '22 at 08:39</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">aamarks</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 11 '22 at 00:35">answered Jan 11 '22 at 00:35</time> <a href="../../users/3736602/aamarks" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3736602.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="aamarks" /> </a> <div class="s-user-card--info"> <a href="../../users/3736602/aamarks" class="s-user-card--link">aamarks</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">942</li> <li class="s-award-bling s-award-blingsilver" title="10 silver badges">10</li> <li class="s-award-bling s-award-blingbronze" title="17 bronze badges">17</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/66396725/how-can-i-get-the-line-that-is-being-clicked-on-in-a-contenteditable-environme" class="question-hyperlink">How can I get the line that is being clicked on in a contenteditable environment?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/5627558/how-do-you-alter-editing-line-of-textarea" class="question-hyperlink">How do you alter editing line of textarea?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">11</div></a> <a href="../../questions/8170573/firing-event-when-caret-moves-between-lines-in-textarea" class="question-hyperlink">Firing event when caret moves between lines in textarea</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/14948425/count-the-number-of-spaces-of-the-current-line-in-a-textarea" class="question-hyperlink">Count the number of spaces of the current line in a textarea</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>