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页面内容如下。我想学习如何在同一页面上打印textarea中的内容。

<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属性从texarea中获取文本。然后用所需的文本替换每个换行符。

＆＃13;

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

＆＃13;

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>

＆＃13;

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）

通过mehod .html()获取innerHTML。
将其与正则表达式/\n/（newLine）分开。
将子字符串与其他"Read"连接。
提醒最终结果。

以下是摘录。

＆＃13;

$('#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);
});

＆＃13;

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

＆＃13;

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

3 个答案: