JavaScript to prefix
on selected text

Question

I have a textarea field where users enter in the information which then gets stored in a JS variable used to for a POST API request however since there are no line breaks as it renders into HTML, all the text is on one line.

How would I be able to prefix the Affecting, Actions Taken & Next Steps with the HTML <br> tag in JavaScript?

Current output:

Affecting: Lorem IpsumActions Taken: Lorem IpsumNext Steps:

Desired output:

<br>Affecting:
<br>Actions Taken:
<br>Next Steps:

TIA

You might want to check this out https://stackoverflow.com/questions/498461/how-to-save-user-entered-line-breaks-from-a-textarea-to-a-database. — bertdida, Aug 11 '20 at 04:01
Are you taking the input and concatenating it each time? if so just add the break tag to that — MVB76, Aug 11 '20 at 04:02
so basically I have a variable that is used as a part of my POST request. I need that variable to have the BR tag prefixed on the above headlines — Ayush Lal, Aug 11 '20 at 04:05
Rather than trying to concatenate 3 inputs into one textarea - and having this issue - I wouyld strongly suggest that you split the inputs out into 3 individual inputs / textareas and then the value of each text input / texarea would pass as separate parameters to your POST query and problem resolved. — gavgrif, Aug 11 '20 at 04:07
@gavgrif unfortunately I cant do that otherwise yeah it would be the best option. There are actually numerous headings that I need concatenated but this is just a small sample — Ayush Lal, Aug 11 '20 at 04:09

score 0 · Answer 1 · answered Aug 11 '20 at 04:07

0

A tag will show as the text of a tag and not render in a textarea, you want newlines.

const val = 'Affecting: Lorem IpsumActions Taken: Lorem IpsumNext Steps:'.replace(/: /g, ': \n');
document.getElementById('txt').value = val;

<textarea id="txt"></textarea>

answered Aug 11 '20 at 04:07

Adrian Brand

20,384
4
39
60

That leads to dogy rendering - Lorem IpsumActions Taken: – gavgrif Aug 11 '20 at 04:09

Carsten Massmann · Accepted Answer · 2020-08-11T05:11:14.580

It looks to me that you want something like this:

console.log(document.getElementById('txt').value.replace(/\n/g, '<br>'))

<textarea id="txt" rows="3" cols="30">Affecting: Lorem Ipsum
Actions Taken: Lorem Ipsum
Next Steps:</textarea>

The text returned in your textarea-value has \n characters in it to mark line endings. In most HTML elements these marks are ignored. You can make them visible in <pre> elements or even in "normal" <divs>s or <p>s if you format them with white-space:pre see here white-space.

In my snippet above I simply replaced each \n by a <br>.

JavaScript to prefix on selected text

2 Answers2

JavaScript to prefix
on selected text