CODEWITHSUNDEEP
javascriptselection
Carson D
Carson D

Reputation: 91

How to determine if there is a line break in selected text

Context

I have a website where users can write articles. Users can hit "enter" to create a new div, which brings them to a new line. Once the article is published, other users can select any text on the article and respond to it. However, I don't want users to be able to highlight text on multiple lines. So, for example, if an article has the following content:

First line here.
Second line here.

The users should be allowed to highlight anything on the first or second line alone (First line could be highlighted, for example), but I don't want them to be able to make a highlight that includes both lines, like so:

here.
Second line

Question

How can I check for a line break like this in jQuery? Is there a character I can check for using regular expressions or something of that sort?

I use the following code to get the selection in the first place:

if (window.getSelection) {

    sel = window.getSelection();

} else if (document.selection && document.selection.type != "Control") {

    sel = document.selection.createRange();

}

//do something with selected text

Can I add something after I get the selection to check for this? Maybe something like this (this example doesn't work):

var match = /\r|n\/.exec(sel);

if (match) {

//do something

}

Let me know if there is any confusion. Thanks.

Upvotes: 1

Views: 1758

Answers (3)

vbrin27
vbrin27

Reputation: 991

I think your code will work except for an issue in the regex expression that you have shared.

Instead of

var match = /\r|n\/.exec(sel);

It should be

var match = /\r|\n/.exec(sel);

But it matches only one occurrence. To match all the occurrences, you need to loop the matching. I have updated the code below.

document.addEventListener('mouseup', function(){
  findHighlightedTexts();
});

function findHighlightedTexts(){
  var highlightedTexts = window.getSelection();
  var occurrence = 0;
  var regexp = /\r|\n/g;
  while(match=regexp.exec(highlightedTexts)) {
     // match is an object which contains info such as the index at which the matched keyword is present
     console.log(match);
      //Output the matched keyword which is new line character here.
     console.log("Keyword: ", match[0]);
      //Index at which the matched keyword is present.
     console.log("Index: ", match.index);
     occurrence++;
  }
  console.log("Total Occurrence: ", occurrence);
}
<h3>Select the texts:</h3>
<div>
  This is Sentence1<br>
  This is Sentence2<br>
  This is Sentence3<br>
  This is Sentence4<br>
  This is Sentence5<br>
  This is Sentence6<br>
</div>

Upvotes: 1

Always Helping
Always Helping

Reputation: 14570

You can use a simple Regex (regular expressions) to achieve what you want. To count line break in a selected text only.

I have recreated your example below where you type text in textarea with adding line breaks.

Once you are done adding words and line breaks you can select that text and click the Count Line Break button to see how many times you have added a new line (Line break)

You can amend the userSelection area of text according to your needs by using if else

Run snippet below to see it working.

var userSelection
function countLineBreaks(){

  //Textarea
  var textarea = document.getElementById("textArea");  

  //Get user selection
  userSelection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);
  
  //Simple regex to check for line break
  var matches = userSelection.match(/\n/g);

  //Count line breaks
  var lineBreaksCount = matches ? matches.length : 0
   
  console.log(lineBreaksCount + ' Line breaks')
}
   
<textarea col="50" rows="10" id="textArea" placeholder="Type here with line breaks"></textarea>
 <br>
<button onclick="countLineBreaks()">Count Line Break In Selected Text</button>

Upvotes: 1

GirkovArpa
GirkovArpa

Reputation: 4912

Looks like you just want to get the first part of a string (the selection, in this case) up to the first line break.

In this example, foo\nbar\rhello\nworld is the selection.

const [result] = 'foo\nbar\rhello\nworld'.split(/\n|\r/);
console.log(result);

Upvotes: 2

Related Questions