This has been driving me crazy all day.

Is there any way to match newlines or linebreaks in a textarea html element.  I am not talking about when a user adds a line break by hitting enter for example.  I am talking about when the browser automatically returns a newline or wraps the line.  These breaks need to be matched via javascript.  Any help would be greatly appreciated.

Sincerely,
Ryan

Since it's JS I assume that you can either access the cols= value of the textarea or you can set it manually in the textarea, in either case you could then do something like:

HTML: <textarea cols=10 rows=7></textarea>

Pattern (need to enclose properly for JS etc., but this should be the general syntax):  [\S\s]{10}|[\S\s]+

Source = "12345678901234567890123456789012"

Matches(0) = "1234567890"
Matches(1) = "1234567890"
Matches(2) = "1234567890"
Matches(3) = "12"

Note that if you use this method you might get unexpected results when the user actually enters a \n\r by issuing a return in the textarea, if but you could also match on \n\r:

\n\r|[\S\s]{10}|[\S\s]+

Source = "12345678
901234567890123456789012"

Matches(0) = "12345678
"
Matches(1) = "9012345678"
Matches(2) = "9012345678"
Matches(3) = "9012"

Using a non-monospaced font might cause problems for the regex if you match your cols= value of your textarea in your pattern, you may need to manually test with the font you use in the textarea to confirm the number of characters per line to use in the {} within the regex pattern.  For example, even if you use cols=10 you might only fit 7 characters on each line, so you would use {7} instead of {10}.

---

Thanks for the help.  This is a great idea in theory, but there is one major flaw.  Let's say the user types the following string into the textarea. 

 var source= "Hi this is a test of how users will enter text into a textarea".

 Now say that the column value is set to 10.  The browser will break the "var source" numerous times in order to keep it from exeeding the 10 column value.  The problem is that depending on the length of the words the browser will, the majority of the time, leave 2,3,4 or more spaces at the end of the line before breaking that line.  And just as you can not regex the linebreaks inside of the textarea, you cannot regex those extra spaces at the end of each line.

 Below is how the browser formats the "var source" inside a textarea with a column value of 10.

Hi this
is a test
of how
users
will
enter
text into
a textarea

 You see what I mean?

 Sincerely,
Ryan

Likely not impossible, but more difficult with regex alone then.

---

I don't know JS and therefore I may have this the wrong way around, but if you are trying to split the 'source' string so that it will have at most 10 characters in each match, then try

(?=\w)((\s|\w){1,10})(?:\s|$)

The matches I get are:

Hi this is
a test of
how users
will enter
text into
a textarea

 
If you use the 1st capture group, then you will get the text you want without any leading or trailing spaces.

Susan
 

Aussie Susan:

I don't know JS and therefore I may have this the wrong way around, but if you are trying to split the 'source' string so that it will have at most 10 characters in each match, then try

(?=\w)((\s|\w){1,10})(?:\s|$)

You are much closer than I was, note that with this test string:This is a 1234567890 test. This is a 12345678901234567890 test. 1234567890.

This is what the 10-column textarea wrapping actually looks like: 

This is a
1234567890
 test.
This is a
1234567890
1234567890
 test.
1234567890
.

Your pattern matches for me as such:
Matches(0).SubMatches(0) = "This is a"
Matches(1).SubMatches(0) = "1234567890"
Matches(2).SubMatches(0) = "test. This"
Matches(3).SubMatches(0) = "is a"
Matches(4).SubMatches(0) = "1234567890"
Matches(5).SubMatches(0) = "test."
Matches(6).SubMatches(0) = "234567890."

One of the issues is that if the 10 character typed is a space and there's an 11th character following then that previous word wraps to the next line.  Also note the match truncation on the last line.  To get these matches to match the periods in the string I changed \s|\w to \s|\S

---

Wow.  That is awesome!  This has been driving me crazy for over three days now and you just about got it.  The caveat now is trying to match the lines word for word. 

var source= "Hi this is a test of how users will enter text into a textarea".

Below is var source formatted via textarea with col="10":
Hi this
is a test
of how
users
will
enter
text into
a textarea 

Below is how the regex (?=\w)((\s|\w){1,10})(?:\s|$) matches "var source"
Hi this is
a test of
how users
will enter
text into
a textarea

So is it possible to match the words line for line?  See how the first line of the above examples are different.  One being "Hi this" and the other being "Hi this is".

Or at least getting the regex to ouput the match with the same number of lines.  For instance, "var source" after being formatted via the textarea has 8 lines total and "var source" when regexed with (?=\w)((\s|\w){1,10})(?:\s|$) has a match of 6 lines total.  Is there a way to regex "var source" so the match will equal 8 lines while making the regex universal, so that any var will work?

Thanks again and any additional input is greatly appreciated.

Sincerely,
Ryan

 

Ryan,

OK, this is what I've come up with so far:

(.{1,10})($|(?<=\S{10}) | (?<=(\S\s+)))

It splits your test string as you wanted it. It splits ddrudik's test string as follows:

This is a 1234567890 test. This is a 12345678901234567890 test. 1234567890.

becomes

This is a
1234567890
test This
is a 12345
6789012345
67890 test
. 12345678
90.

 

I've also tried a test string where the number of long words is not a multiple of 10 and I get:

Hi this is a big hippopotimus test. This is a 123456789012 test. 1234567890.

splits into

Hi this
is a big
hippopotim
us test.
This is a
1234567890
12 test.
1234567890
.

Is this closer?

Susan 

 

Susan,

You are so awesome for taking it this far.  Seriously you are making my day! 
 It is soooo close.  Below are the results. 

The regex (.{1,10})($|(?<=\S{10}) | (?<=(\S\s+))) on the below string This is a 1234567890 test. This is a 12345678901234567890 test. 1234567890. result to:

This is a
1234567890
test This
is a 12345
6789012345
67890 test
. 12345678
90.

When inserting this same string into a textarea of col=10 it results in

This is a
1234567890
test. This
is a
123456789012
 test.
1234567890.

The second string results as follows:

Regex result:

Hi this
is a big
hippopotim
us test.
This is a
1234567890
12 test.
1234567890
.

 Textarea result:

Hi this is
a big
hippopotimus
test. This
is a
123456789012
 test.
1234567890.

Thank you so much for your time.  I can not tell you how much frustration you have eased.  If you can get the total amount lines to be equal I will throw in twenty bucks via paypal. 

 Sincerely,
Ryan

 

This is how the sample content is displayed:

This is a
1234567890
 test
This is a
1234567890
1234567890
 test.
1234567890
.

Hi this
is a big
hippopotim
us test.
This is a
1234567890
12 test.
1234567890
.

Note the space before "test" in one of the lines, that throws that line off to where "This" is sent to the next line.  Other than that I would say you are very close to solving this problem (apparently it wasn't impossible after all), unfortunately ?<= is apparently not supported in vbscript and I don't know if it's supported in Javascript either.

To test in your own .htm document:

<textarea cols=10 rows=9></textarea>

---

Susan,

 Just thought of this.  Browsers format the textarea differently,  it looks like (.{1,10})($|(?<=\S{10}) | (?<=(\S\s+)))  is as close as it is going to get.  The regex (.{1,10})($|(?<=\S{10}) | (?<=(\S\s+))) tried in various browsers will be right on or one or two charters off at the end of the string.  This is plenty sufficient for what it will be used on. 

Please somehow send me your paypal email address.  I would really like to express my gratitude.  Don't be shy your work really saved me a lot of time.

Sincerely,
Ryan 

I don't have one, and I wouldn't accept anything anyway. It was an interesting challenge. I'm just pleased to have helped.

Others have help me in the past, so feel free to contribute your experience to others in the future. 

Susan
 

Hi Susan,

I tested this the first time today via javascript regex.  Unfortunately, it looks like "?<=" is not supported in javascript for the regex (.{1,10})($|(?<=\S{10}) | (?<=(\S\s+))).  Doe you think there is a workaround to this?

 Sincerely,
Ryan

lazukars, I am curious how you will use this regex, I haven't seen this requested elsewhere but I assume you have some specific use for it.

---

Sure,

I am trying to make a textarea that has no scrollbars.  Instead it will read the number of lines on the fly that the user has submitted and expand accordingly.  Right now you can see the beta at http://www.allisonstokke.org/add.htm .  Since the "?<=" does not work in javascript my current regex is (.{1,40}|(\n\r|\r|\n)) .  I am currently working on making this regex more percise.  Obviously, it needs to be way more specific to work more efficiently.  Any thoughts and advice is greatly appreciated.  Also, for some reason, I can not get Susan's first regex (?=\w)((\s|\w){1,10})(?:\s|$) to work.

Thanks again for any advice,
Ryan