如何打印使用的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

回答

相關問題