How do I replace the line breaks in a textarea by a

Question

I formed a textarea and a button that replaces the line breaks of this textarea with <br /> tags.

Code:

var gtcontbtnafterTA = document.getElementById("contbtnafterTA");
var gtRequesttextarea = document.getElementById("Requesttextarea");

gtcontbtnafterTA.onclick = function(event) {
  "use strict";
  Requesttextarea.replace(new RegExp('\r?\n', 'g'), '<br/>');
}

#Requesttextarea {
  font-family: Traditional Arabic;
  font-size: 14pt;
  color: #000099;
  font-weight: bold;
  text-align: center;
  direction: rtl;
  width: 80%;
  height: 100px;
  border: 3px double #FF0000
}

#contbtnafterTA {
  font-family: Traditional Arabic;
  font-size: 14pt;
  color: #0000FF;
  font-weight: bold;
  width: 450
}

<p><textarea rows="50" name="Requesttextarea" cols="50" dir="rtl" id="Requesttextarea"></textarea></p>
<p><input type="button" value="الخطوات التالية" name="contbtnafterTA" dir="rtl" id="contbtnafterTA" class="buttonstyles"></p>

Resulting error:

Object doesn't support property or method replace:

I hope I can get some code that replaces linebreaks with <br /> tags

Here are some pictures to explain the desired outcome.

Before:

After:

There is one line and some <br /> tags replacing each new line

You need to access the _value_ of the textarea … read it, replace in there, write it back. — CBroe, Jun 11 '18 at 11:54
Possible duplicate of [How do I replace all line breaks in a string with
tags?](https://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags) — treyBake, Jun 11 '18 at 11:56
Instead of `Requesttextarea.replace(new RegExp('\r?\n', 'g'), '
');` try this: `gtRequesttextarea.value.replace(new RegExp('\r?\n', 'g'), '
');` — r3dst0rm, Jun 11 '18 at 11:56
1) Your question looks [duplicated](https://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags) 2) Check your textarea's variable. in onclick function it's wrong 3) You've to replace it's value — Brissy, Jun 11 '18 at 11:56
@Brissy , I checked The full topic. There are frequent question, but there is no suitable solution for my this simple case. That's why I added a specific question. I'm sorry. — KhaledHarbii, Jun 11 '18 at 12:06
@r3dst0rm , I tried , The textarea doesn't change , but the error code hasn't been shown now. — KhaledHarbii, Jun 11 '18 at 12:08
You have to reassign the value again like so: `gtRequesttextarea.value = gtRequesttextarea.value.replace(new RegExp('\r?\n', 'g'), '
');` — r3dst0rm, Jun 11 '18 at 12:27
@r3dst0rm, > Well, I understand you. I will try now. Thank You. — KhaledHarbii, Jun 11 '18 at 12:32

score 0 · Accepted Answer · edited Jun 11 '18 at 12:08

You need to access the textarea value

var gtcontbtnafterTA = document.getElementById("contbtnafterTA");
var gtRequesttextarea = document.getElementById("Requesttextarea");

gtcontbtnafterTA.onclick = function(event) {
  "use strict";
  Requesttextarea.value = Requesttextarea.value.replace(new RegExp('\r?\n', 'g'), '<br/>');
}

#Requesttextarea {
  font-family: Traditional Arabic;
  font-size: 14pt;
  color: #000099;
  font-weight: bold;
  text-align: center;
  direction: rtl;
  width: 80%;
  height: 100px;
  border: 3px double #FF0000
}

#contbtnafterTA {
  font-family: Traditional Arabic;
  font-size: 14pt;
  color: #0000FF;
  font-weight: bold;
  width: 450
}

<p><textarea rows="50" name="Requesttextarea" cols="50" dir="rtl" id="Requesttextarea"></textarea></p>
<p><input type="button" value="الخطوات التالية" name="contbtnafterTA" dir="rtl" id="contbtnafterTA" class="buttonstyles"></p>

How do I replace the line breaks in a textarea by a

1 Answers1