Jquery, Line Break in Textarea.. Don't Get \N and Get ↵

var str = `your text
           that spans
           multiple lines`

// Split the string on \n or \r characters
var separateLines = str.split(/\r?\n|\r|\n/g);

alert("Total number of separate lines is: " + separateLines.length);

Replace ↵ (\n) in non-render (non-display) element text

First, let's clear up a few misunderstandings you seem to have based on the examples you've provided.

↵ is a unicode character described as DOWNWARDS ARROW WITH CORNER LEFTWARDS. Sure, it makes a nice visual representation of a line break or the Return/Enter key, but it has no meaning in code. If you use this symbol in a regular expression, the regular expression will try to match for text that includes the arrow symbol.

In most programming languages, \n in a string represents a line break, and you don't have to be bothered by how it is represented under the hood, be it with a CR, an LF, or both. So I wouldn't use \r in JavaScript.

.replace(/\n/gi, " ") is a perfectly valid option, depending on what you want to do. You might want to replace any sequence of whitespace that includes newlines, however. In that case, I would use this instead: .replace(/\s+/, " "). The \s special code in RegExp matches any kind of white space including line breaks. Adding a + makes it match any sequence of white space. Using this will ensure that a string like this one "a \n \n b" gets turned into "a b".

Now that the regular expression issues have been dealt with, let's look at innerText. According to the HTML Living Standard which I found by looking at the MDN article for innerText, the innerText property is an approximation of what the user will get when copy-pasting the text from that element. It is defined like this:

If this element is not being rendered, or if the user agent is a non-CSS user agent, then return the same value as the textContent IDL attribute on this element. Note: This step can produce surprising results, as when the innerText attribute is accessed on an element not being rendered, its text contents are returned, but when accessed on an element that is being rendered, all of its children that are not being rendered have their text contents ignored.

This answers why there might be a difference between visible and hidden elements. As for the number of line breaks, the algorithm that determines how many line breaks are in the string is defined recursively on the standard page and it is quite confusing, which is why I would advise not to base your logic on the behavior of this function. innerText is meant to be an approximation.

I suggest taking a look at textContent, which isn't affected by CSS.

So to wrap up this long explanation:

1. Yes, display: none does influence innerText
2. I might use foo.textContent.replace(/\s+/g, " ") depending on what your goal is.

JS comparing strings with line breaks

The problem was in \r character: textarea value rendered by Handlebars was Some\ntext while string stored in model was Some\r\ntext).
And this did the trick: textarea.value.replace(/\n/gm, '\r\n');

How to split newline

Try initializing the ks variable inside your submit function.

  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           var ks = $('#keywords').val().split("\n");
           e.preventDefault();
           alert(ks[0]);
           $.each(ks, function(k){
              alert(k);
           });
        });
     });
  })(jQuery);

---

Related Topics