Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31750 > unrolled thread

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

Back to article view | Back to comp.lang.javascript

Contents

  Replacing javascript line break (\n) with HTML line break (<br/>) justaguy <lichunshen84@gmail.com> - 2016-11-30 19:15 -0800
    Re: Replacing javascript line break (\n) with HTML line break (<br/>) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-12-01 10:51 +0100
      Re: Replacing javascript line break (\n) with HTML line break (<br/>) justaguy <lichunshen84@gmail.com> - 2016-12-01 05:55 -0800
        Re: Replacing javascript line break (\n) with HTML line break (<br/>) justaguy <lichunshen84@gmail.com> - 2016-12-01 05:59 -0800
        Re: Replacing javascript line break (\n) with HTML line break (<br/>) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-12-01 16:41 +0100
      Re: Replacing javascript line break (\n) with HTML line break (<br/>) Cybercode <lambda@dr.com> - 2016-12-01 17:49 +0000
        Re: Replacing javascript line break (\n) with HTML line break (<br/>) justaguy <lichunshen84@gmail.com> - 2016-12-01 13:09 -0800
        Re: Replacing javascript line break (\n) with HTML line break (<br/>) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-12-01 23:13 +0100
          Re: Replacing javascript line break (\n) with HTML line break (<br/>) rmmjr@rmmillerjr.com - 2016-12-11 07:10 -0800
            Re: Replacing javascript line break (\n) with HTML line break (<br/>) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-12-11 16:53 +0100
          Re: Replacing javascript line break (\n) with HTML line break (<br/>) rmmjr@rmmillerjr.com - 2016-12-11 07:10 -0800

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

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.

[toc] | [next] | [standalone]

#31751

justaguy <lichunshen84@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)

[toc] | [prev] | [next] | [standalone]

#31752

On Thursday, December 1, 2016 at 4:51:37 AM UTC-5, Evertjan. wrote:
> justaguy <> 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>
> =====
> 

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. 

[toc] | [prev] | [next] | [standalone]

#31753

On Thursday, December 1, 2016 at 8:55:38 AM UTC-5, justaguy wrote:
> On Thursday, December 1, 2016 at 4:51:37 AM UTC-5, Evertjan. wrote:
> > justaguy <> 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>
> > =====
> > 
> 
> 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.

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

[toc] | [prev] | [next] | [standalone]

#31754

justaguy <lichunshen84@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.


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

[toc] | [prev] | [next] | [standalone]

#31756

Evertjan. <exxjxw.hannivoort@inter.nl.net> wrote:
> justaguy <lichunshen84@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.

[toc] | [prev] | [next] | [standalone]

#31758

On Thursday, December 1, 2016 at 12:49:32 PM UTC-5, Cybercode wrote:
> Evertjan. <> wrote:
> > justaguy <> 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.

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.

[toc] | [prev] | [next] | [standalone]

#31759

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.

[toc] | [prev] | [next] | [standalone]

#31793

<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. 

[toc] | [prev] | [next] | [standalone]

#31795

rmmjr@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>

-- 
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.

[toc] | [prev] | [next] | [standalone]

#31794

<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. 

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web