如何判断选中的文本是否有换行

Question

上下文

我有一个用户可以写文章的网站。用户可以点击“enter”来创建一个新的 div，这会将他们带到一个新行。文章发布后，其他用户可以 select 文章中的任何文本并进行回复。但是，我不希望用户能够突出显示多行文本。因此，例如，如果一篇文章具有以下内容：

First line here.
Second line here.

应该允许用户单独突出显示第一行或第二行的任何内容（例如，First line 可以突出显示），但我不希望他们能够突出显示包括两行，像这样：

here.
Second line

问题

如何在 jQuery 中检查这样的换行符？有没有我可以使用正则表达式或类似的东西来检查的字符？

我首先使用以下代码获取 selection：

if (window.getSelection) {

    sel = window.getSelection();

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

    sel = document.selection.createRange();

}

//do something with selected text

我可以在获得 selection 后添加一些东西来检查这个吗？也许是这样的（这个例子不起作用）：

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

if (match) {

//do something

}

如果有任何困惑，请告诉我。谢谢。

Answer 1

看起来您只想获取字符串的第一部分（在本例中为选择）直到第一个换行符。

在这个例子中，foo\nbar\rhello\nworld 是选择。

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

Answer 2

您可以使用简单的Regex（正则表达式）来实现您想要的。仅计算 selected 文本中的换行符。

我在下面重新创建了您的示例，您在 textarea 中键入文本并添加换行符。

添加完 words 和 line breaks 后，您可以 select 该文本并单击 Count Line Break 按钮查看您添加了多少次新行（换行符）

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

运行下面的代码片段以查看它是否正常工作。

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>

Answer 3

我认为除了您共享的正则表达式中的问题外，您的代码可以正常工作。

而不是

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

应该是

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

但它只匹配了一次。要匹配所有出现的地方，您需要循环匹配。我更新了下面的代码。

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>

如何判断选中的文本是否有换行

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

javascript

selection