How to print each line from textarea using innerHTML and javascript

Question

For example, if I have the following text inside textarea:

<textarea rows="20" cols="50" id="targetTextArea"> 
How to 
print each 
line from 
textarea using 
innerHTML and 
javascript
</textarea>

Then I want to use innerHTML and javascript to parse this textarea and print it on the same page.

Reason, while printing on the page, I would like to prefix by adding some static text to each line, let's say output should look like:

Read How to 
Read print each 
Read line from 
Read textarea using 
Read innerHTML and 
Read javascript

Thanks in advance.

All of my html page content is below. I want to learn how to print what's in textarea on the same page.

<html>
<body>
Print the contents of textarea as is inside html page
<br/>
<textarea rows="20" cols="50" id="targetTextArea">
How to 
print each 
line from 
textarea using 
innerHTML and 
javascript
</textarea>
<br/>
<button type="button" onclick="printonpage()">Print on Page</button>
</body>
</html>

YOu will have to make and display your own coding attempt first. — Norbert, Jul 12 '15 at 17:18
norbert, i just updated my post with the code I have so far. I wanted to know if there is a solution that will get me what i am looking for. I haven't yet tried writing any javascript. looks like there are some folks who already have answered my question as do-able. — user3597168, Jul 12 '15 at 17:39

jthomas · Accepted Answer · 2015-07-12T17:44:06.867

1

You can use the value property to get the text out of the texarea. Then replace each newline with the desired text.

function printonpage() {
    var text = document.getElementById('targetTextArea');
    var val = text.value;
    var arr = val.split("\n");

    arr = arr.slice(0, arr.length -1);

    var newText = "Read " + arr.join("<br>Read ");
    var output = document.getElementById('output');
    
    output.innerHTML = newText;
}

Print the contents of textarea as is inside html page
<br/>
<textarea rows="6" cols="50" id="targetTextArea">
How to 
print each 
line from 
textarea using 
innerHTML and 
javascript
</textarea>
<br/>
<button type="button" onclick="printonpage()">Print on Page</button>
<div id="output"></div>

edited Jul 12 '15 at 17:44

answered Jul 12 '15 at 17:19

jthomas

858
6
19

Just out of curiosity, why did you do `arr = arr.slice(0, arr.length -1);`? – Rohan Jul 12 '15 at 17:21
1

To drop the last newline that occurs after "javascript". – jthomas Jul 12 '15 at 17:22

score 1 · Answer 2 · answered Jul 12 '15 at 17:21

You can use following code to do the same. This code using innerHTML and javascript

var textareastext = "<pre>"+ document.getElementById('targetTextArea').value+"</pre>";



document.getElementById('innerhtml').innerHTML = textareastext;
document.getElementById('targetTextArea').style.display = 'none';
window.print();

<textarea rows="20" cols="50" id="targetTextArea"> 
How to 
print each 
line from 
textarea using 
innerHTML and 
javascript
</textarea>

<div id="innerhtml"></div>

score 1 · Answer 3 · answered Jul 12 '15 at 17:28

Check out this fiddle. (I have used jQuery)

Get the innerHTML by the mehod .html().
split it with regex /\n/ (newLine).
Concatenate the substrings with additional "Read".
Alert the final result.

Here is the snippet.

$('#click').click(function() {
  var text = $('#targetTextArea').html();
  var lines = text.split(/\n/);
  var finalText = '';
  for (i in lines) {
    finalText = finalText + 'Read ' + lines[i] + '\n';
  }
  alert(finalText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea rows="20" cols="50" id="targetTextArea">How to 
print each
line from
textarea using
innerHTML and
javascript</textarea>
<input type="button" value="Click Me" id="click" />

How to print each line from textarea using innerHTML and javascript

3 Answers3