如何使用 innerHTML 和 javascript 从 textarea 打印每一行

Question

例如，如果我在 textarea 中有以下文本：

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

然后我想用innerHTML和javascript解析这个textarea并打印在同一页上。

原因，在页面上打印时，我想在每行中添加一些静态文本作为前缀，假设输出应该如下所示：

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

提前致谢。

我的所有 html 页面内容都在下面。我想学习如何在同一页上打印文本区域中的内容。

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

Answer 1

您可以使用 value 属性将文本移出文本区域。然后用所需的文本替换每个换行符。

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>

Answer 2

您可以使用以下代码来执行相同的操作。此代码使用 innerHTML 和 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>

Answer 3

看看这个 fiddle。（我用过jQuery）

通过方法.html()获取innerHTML。
用正则表达式 /\n/ (newLine) 拆分它。
将子字符串与额外的 "Read".
提醒最终结果。

这是片段。

$('#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" />

如何使用 innerHTML 和 javascript 从 textarea 打印每一行

How to print each line from textarea using innerHTML and javascript

javascript

jquery

html

dom

document.write