Replacing javascript line break (\n) with HTML line break (<br/>)

[justaguy]

task:
turn js line breaks inside HTML Textarea tag into HTML line breaks, <br/>

code:
// el stand for document id
var lb = function(el) {
var pa = document.getElementById(el).value;
pa = pa.replace(/\n/g,'\n<br/>');
document.getElementById(el).value = pa;
}

outcome:
(1) tested with Firefox 50 for Windows, the very first instance of the Textarea behaved as expected, however, the function added two line breaks for another Textarea element that I hit Enter only once.
(2) tested with Safari v5.1.7 for Windows, I got inconsistent results (my target users for this particular app won't use this browser), so, I can ignore it.
(3) would love to test with Chrome, however, Chrome keeps on crashing on my current laptop.

Another thing:
It's not elegant to bring the <br/> down to next line...

Thoughts? Thanks as always.

[Evertjan.]

justaguy <lichun...@gmail.com> wrote on 01 Dec 2016 in
comp.lang.javascript:

> turn js line breaks inside HTML Textarea tag into HTML line breaks, <br/>

<br/> is NOT HTML, but XML. Why should you use that?????????

<br> is HTML.

==================

The below works fine here in Chrome,
no reason why it should not work in all other modern browsers:

======
<script type='text/javascript'>
'use strict'

function changeBr() {
let pa = document.getElementById('txa');
pa.value = pa.value.replace(/\n/g,'\n<br>');
toDiv();
};

function toDiv() {
let pa = document.getElementById('txa');
let div1 = document.getElementById('div1');
div1.innerHTML = pa.value;
};

window.onload = toDiv;

</script>

<textarea id='txa' style='height:80px;'>
one
two
three
</textarea>
<br><br>
<button onclick='changeBr()'>
change \n to \n&lt;br>
</button>
<br><br>
<div id='div1' style='border:solid red 3px;float:left;'>
???
</div>
=====




--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[justaguy]

On Thursday, December 1, 2016 at 4:51:37 AM UTC-5, Evertjan. wrote:
> justaguy <> wrote on 01 Dec 2016 in

Good catch on the XML and HTML part for the line break!
But both of them should work for this purpose.

Probably I wasn't clear. The page has about 5 elements using Textarea and all of them references the same js function. So, for instance, a Textarea element with id of 'legalStuff', I'll call up the js function of lb with lb('legalStuff') and another Textarea element of id of 'shortDesc' with lb('shortDesc'). Firefox ver 50 is a modern browser, isn't it?

Thanks.

[justaguy]

Also, I'm using onblur event trigger/handler to activate the js function for each Textarea element, thought that's the proper choice.

[Evertjan.]

justaguy <lichun...@gmail.com> wrote on 01 Dec 2016 in
comp.lang.javascript:

> Good catch on the XML and HTML part for the line break!
> But both of them should work for this purpose.

That is NOT a catch,
and is does not mean it will not work,
because browsers are developed to be forgiving,
more forgiving than I am.

Crossing the motorway blindfolded could leave you unblamished too.

However,you are just mistaken in saying:

>> > turn js line breaks inside HTML Textarea tag into HTML line breaks

> Probably I wasn't clear. The page has about 5 elements using Textarea
> and all of them references the same js function. So, for instance, a
> Textarea element with id of 'legalStuff', I'll call up the js function
> of lb with lb('legalStuff') and another Textarea element of id of
> 'shortDesc' with lb('shortDesc').

Well yes, we are not in the business of providing you with all the code,
my code is just an example for you to understand what is possible.

> Firefox ver 50 is a modern browser, isn't it?

I am not interested in that. I want you to learn by applying and testing
your own code, so that your Qs on this NG become more challenging that at
the present.

If you expect to get code that works to your specifications as-is,
you better hire a professional programmer.

[Cybercode]

Evertjan. <exxjxw.h...@inter.nl.net> wrote:
> justaguy <lichun...@gmail.com> wrote on 01 Dec 2016 in
> comp.lang.javascript:
>
>> turn js line breaks inside HTML Textarea tag into HTML line breaks, <br/>
>
> <br/> is NOT HTML, but XML. Why should you use that?????????
>
> <br> is HTML.

"A Self-closing tag is a special form of start tag with a slash immediately before the closing right angle bracket. These indicate that the
element is to be closed immediately, and has no content. Where this syntax is permitted and used, the end tag must be omitted. In HTML,
the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start
tag. In XHTML, it is possible for any element to use this syntax. But note that it is only conforming for elements with content models
that permit them to be empty."
- https://dev.w3.org/html5/html-author/

I think that this means that <br/> is valid in html5.

[justaguy]

On Thursday, December 1, 2016 at 12:49:32 PM UTC-5, Cybercode wrote:
> Evertjan. <> wrote:
> > justaguy <> wrote on 01 Dec 2016 in

Great, thank you.

Btw, my js code works across board now (for all the Textarea elements in the page), previously I forgot to give one Textarea element an ID.

[Thomas 'PointedEars' Lahn]

Cybercode wrote:

> I think that this means that <br/> is valid in html5.

Correct, as a simple markup validation using W3C Nu Html Checker would have
showed.

Please post here using your real name.

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[rm...@rmmillerjr.com]

<br/> is XHTML syntax and must include the trailing backslash to be valid.

<br> is the HTML5 itteration of a void element, however it does not require a trailing backslash for the sake of validity.

[rm...@rmmillerjr.com]

[Thomas 'PointedEars' Lahn]

rm...@rmmillerjr.com wrote:
^^^^^^^^^^^^^^^^^^^^
Please post using your real name.

> <br/> is XHTML syntax and must include the trailing backslash to be valid.

Utter nonsense.

> <br> is the HTML5 itteration of a void element, however it does not
> require a trailing backslash for the sake of validity.

“/” is a _slash_, _not_ a *back*slash. You should learn the basics of a
field before you attempt to lecture others about it.

The slash, or more precisely, the character sequence “/>”, is required in an
HTML5 document written in the XHTML syntax:

<https://www.w3.org/TR/2016/REC-html51-20161101/introduction.html#html-vs-xhtml>


It can result in invalid markup in an HTML4 document where, per the HTML
4.01 Specification, “<…/>” is equivalent to “<…>&gt;”.

For example, “<meta …/>” would be equivalent to “<meta …>&gt;” in HTML4.
“&gt;” would parse as text content “>”, however text content is not allowed
on the first nesting level of the HEAD element, where an otherwise valid
META element were to be found.

And if the result would not be invalid, it could be the unwanted display of
a “>” character:

Some authors, also through XHTML, have acquired the misconception that
elements with SGML content model EMPTY would need to be “closed” this way in
HTML, too. As a result, some vendors have modified their HTML parsers to
not implement the HTML4 Specification to the letter (there as well) and to
simply ignore the slash when in HTML mode; eventually, HTML5, based on
WHATWG HTML, which is driven by few browser vendors, has standardized this
behavior. However, relying on this parsing behavior in documents written
in earlier versions of HTML than 5 is error-prone and should be avoided.

<http://dodabo.de/html+css/tests/shorttag.html>