如何打印使用的innerHTML和JavaScript

-2

例如从textarea的每一行，如果我有内部的textarea以下文字：如何打印使用的innerHTML和JavaScript

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

然后我想使用innerHTML和JavaScript解析这个文本区域，并打印在同一页。

原因，而在页面上打印时，我想添加一些静态文本每行前缀，假设输出应该是这样的：提前

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>

来源

2015-07-12 user3597168

你将不得不做出与第一次显示自己的编码尝试。 –

向我们展示代码，到目前为止您尝试了什么？ – kosmos

norbert，我刚刚用我到目前为止的代码更新了我的帖子。我想知道是否有解决方案能够帮助我找到我想要的东西。我还没有尝试写任何JavaScript。看起来好像有些人已经回答我的问题是可行的。 – user3597168

您可以使用value属性从texarea中获取文本。然后用所需的文本替换每个换行符。

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>

来源

2015-07-12 17:19:14 jthomas

出于好奇，你为什么要做'arr = arr.slice（0，arr.length -1）;'？ – Rohan

删除“javascript”后发生的最后一个换行符。 – jthomas

您可以使用下面的代码来这样做。此代码使用的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>

来源

2015-07-12 17:21:10

看看这个fiddle。（我已经使用jQuery）

通过mehod获取innerHTML .html()。
用正则表达式分割它/\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" />

来源

2015-07-12 17:28:00

如何打印使用的innerHTML和JavaScript

回答

相关问题