Javascript print textarea with text highlighted colors
1
I have a textarea that displays a report with keywords like "FAIL", "WARNING", "ERROR". I want to be able to print this textarea with the highlighted colors included.
Currently, I am able to print my textarea using the following function (without highlighted colors):
js:
function printTextArea()
childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.open();
childWindow.document.write('<html><head></head><body>');
childWindow.document.write(document.getElementById('textArea').value.replace(/n/gi,'<br>'));
childWindow.document.write('</body></html>');
//this doesn't highlight the text in my print prompt window
childWindow.document.body.innerHTML.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.print();
childWindow.document.close();
childWindow.close();
css:
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow;
Also, when I view the html before the print() I see the correct class appended to my keyword:
<span class='highlight'>FAIL</span>
I'm trying to add the highlight class when writing to the new window and print with highlighted text but it doesn't seem to work. Is there something I am doing wrong?
javascript html css
asked Nov 16 '18 at 2:03
honeybadger_executehoneybadger_execute
14411
add a comment |
1
I have a textarea that displays a report with keywords like "FAIL", "WARNING", "ERROR". I want to be able to print this textarea with the highlighted colors included.
Currently, I am able to print my textarea using the following function (without highlighted colors):
js:
function printTextArea()
childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.open();
childWindow.document.write('<html><head></head><body>');
childWindow.document.write(document.getElementById('textArea').value.replace(/n/gi,'<br>'));
childWindow.document.write('</body></html>');
//this doesn't highlight the text in my print prompt window
childWindow.document.body.innerHTML.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.print();
childWindow.document.close();
childWindow.close();
css:
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow;
Also, when I view the html before the print() I see the correct class appended to my keyword:
<span class='highlight'>FAIL</span>
I'm trying to add the highlight class when writing to the new window and print with highlighted text but it doesn't seem to work. Is there something I am doing wrong?
javascript html css
asked Nov 16 '18 at 2:03
honeybadger_executehoneybadger_execute
14411
add a comment |
1
1
1
I have a textarea that displays a report with keywords like "FAIL", "WARNING", "ERROR". I want to be able to print this textarea with the highlighted colors included.
Currently, I am able to print my textarea using the following function (without highlighted colors):
js:
function printTextArea()
childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.open();
childWindow.document.write('<html><head></head><body>');
childWindow.document.write(document.getElementById('textArea').value.replace(/n/gi,'<br>'));
childWindow.document.write('</body></html>');
//this doesn't highlight the text in my print prompt window
childWindow.document.body.innerHTML.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.print();
childWindow.document.close();
childWindow.close();
css:
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow;
Also, when I view the html before the print() I see the correct class appended to my keyword:
<span class='highlight'>FAIL</span>
I'm trying to add the highlight class when writing to the new window and print with highlighted text but it doesn't seem to work. Is there something I am doing wrong?
javascript html css
asked Nov 16 '18 at 2:03
honeybadger_executehoneybadger_execute
14411
I have a textarea that displays a report with keywords like "FAIL", "WARNING", "ERROR". I want to be able to print this textarea with the highlighted colors included.
Currently, I am able to print my textarea using the following function (without highlighted colors):
js:
function printTextArea()
childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.open();
childWindow.document.write('<html><head></head><body>');
childWindow.document.write(document.getElementById('textArea').value.replace(/n/gi,'<br>'));
childWindow.document.write('</body></html>');
//this doesn't highlight the text in my print prompt window
childWindow.document.body.innerHTML.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.print();
childWindow.document.close();
childWindow.close();
css:
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow;
Also, when I view the html before the print() I see the correct class appended to my keyword:
<span class='highlight'>FAIL</span>
I'm trying to add the highlight class when writing to the new window and print with highlighted text but it doesn't seem to work. Is there something I am doing wrong?
javascript html css
javascript html css
asked Nov 16 '18 at 2:03
honeybadger_executehoneybadger_execute
14411
asked Nov 16 '18 at 2:03
honeybadger_executehoneybadger_execute
14411
edited Nov 16 '18 at 2:11
honeybadger_execute
asked Nov 16 '18 at 2:03
honeybadger_executehoneybadger_execute
14411
asked Nov 16 '18 at 2:03
honeybadger_executehoneybadger_execute
14411
asked Nov 16 '18 at 2:03
honeybadger_executehoneybadger_execute
14411
14411
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Because the popup window does not include the css defined in the parent window. For easier to debug, better use variable content to store.
To print it with background highlight, only chrome browser works.
For more information, please refer to Background color not showing in print preview
<html>
<style type="text/css" media="all">
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow !important;
</style>
<script>
function escapeHtml(html)
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
function printTextArea()
let childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.write('<html><head>');
let styles = document.getElementsByTagName('style');
for(var i=0; i<styles.length; ++i)
childWindow.document.write(styles[i].outerHTML);
childWindow.document.write('</head><body>');
var content = escapeHtml(document.getElementById('textArea').value).replace(/n/gi,'<br>');
content = content.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.document.write(content);
childWindow.document.write('</body></html>');
childWindow.document.close();
childWindow.focus();
setTimeout(function ()
childWindow.print();
childWindow.close();
, 500);
</script>
<body>
<textarea id="textArea">FAIL: ABC
FAIL: DE</textarea>
<button onclick="printTextArea()">print TextArea</button>
</body>
</html>
answered Nov 16 '18 at 3:38
Miller Cy ChanMiller Cy Chan
403410
Give this a try:<textarea><span style="background-color: yellow">Text</span></textarea>
– Robby Cornelissen
Nov 16 '18 at 5:05
This code didn't work for me, I still don't see text highlighted in the print preview page. Did it work for you?
– honeybadger_execute
Nov 16 '18 at 20:01
So when i changed it to @RobbyCornelissen suggestion, i now see the color added to thechildWindow, but when hit click print, in the print preview I don't see the highlights anymore. I even increased the settimeout to a higher value thinking that it might be printing to quick, but that was not it.
– honeybadger_execute
Nov 16 '18 at 20:18
Only chrome works, please refer to stackoverflow.com/questions/35625178/…
– Miller Cy Chan
Nov 17 '18 at 2:59
If you want to print it for other browsers, you may capture the div as image then print. Please see my answer at stackoverflow.com/questions/51767557/…
– Miller Cy Chan
Nov 17 '18 at 3:03
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330440%2fjavascript-print-textarea-with-text-highlighted-colors%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Because the popup window does not include the css defined in the parent window. For easier to debug, better use variable content to store.
To print it with background highlight, only chrome browser works.
For more information, please refer to Background color not showing in print preview
<html>
<style type="text/css" media="all">
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow !important;
</style>
<script>
function escapeHtml(html)
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
function printTextArea()
let childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.write('<html><head>');
let styles = document.getElementsByTagName('style');
for(var i=0; i<styles.length; ++i)
childWindow.document.write(styles[i].outerHTML);
childWindow.document.write('</head><body>');
var content = escapeHtml(document.getElementById('textArea').value).replace(/n/gi,'<br>');
content = content.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.document.write(content);
childWindow.document.write('</body></html>');
childWindow.document.close();
childWindow.focus();
setTimeout(function ()
childWindow.print();
childWindow.close();
, 500);
</script>
<body>
<textarea id="textArea">FAIL: ABC
FAIL: DE</textarea>
<button onclick="printTextArea()">print TextArea</button>
</body>
</html>
answered Nov 16 '18 at 3:38
Miller Cy ChanMiller Cy Chan
403410
Give this a try:<textarea><span style="background-color: yellow">Text</span></textarea>
– Robby Cornelissen
Nov 16 '18 at 5:05
This code didn't work for me, I still don't see text highlighted in the print preview page. Did it work for you?
– honeybadger_execute
Nov 16 '18 at 20:01
So when i changed it to @RobbyCornelissen suggestion, i now see the color added to thechildWindow, but when hit click print, in the print preview I don't see the highlights anymore. I even increased the settimeout to a higher value thinking that it might be printing to quick, but that was not it.
– honeybadger_execute
Nov 16 '18 at 20:18
Only chrome works, please refer to stackoverflow.com/questions/35625178/…
– Miller Cy Chan
Nov 17 '18 at 2:59
If you want to print it for other browsers, you may capture the div as image then print. Please see my answer at stackoverflow.com/questions/51767557/…
– Miller Cy Chan
Nov 17 '18 at 3:03
add a comment |
0
Because the popup window does not include the css defined in the parent window. For easier to debug, better use variable content to store.
To print it with background highlight, only chrome browser works.
For more information, please refer to Background color not showing in print preview
<html>
<style type="text/css" media="all">
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow !important;
</style>
<script>
function escapeHtml(html)
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
function printTextArea()
let childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.write('<html><head>');
let styles = document.getElementsByTagName('style');
for(var i=0; i<styles.length; ++i)
childWindow.document.write(styles[i].outerHTML);
childWindow.document.write('</head><body>');
var content = escapeHtml(document.getElementById('textArea').value).replace(/n/gi,'<br>');
content = content.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.document.write(content);
childWindow.document.write('</body></html>');
childWindow.document.close();
childWindow.focus();
setTimeout(function ()
childWindow.print();
childWindow.close();
, 500);
</script>
<body>
<textarea id="textArea">FAIL: ABC
FAIL: DE</textarea>
<button onclick="printTextArea()">print TextArea</button>
</body>
</html>
answered Nov 16 '18 at 3:38
Miller Cy ChanMiller Cy Chan
403410
Give this a try:<textarea><span style="background-color: yellow">Text</span></textarea>
– Robby Cornelissen
Nov 16 '18 at 5:05
This code didn't work for me, I still don't see text highlighted in the print preview page. Did it work for you?
– honeybadger_execute
Nov 16 '18 at 20:01
So when i changed it to @RobbyCornelissen suggestion, i now see the color added to thechildWindow, but when hit click print, in the print preview I don't see the highlights anymore. I even increased the settimeout to a higher value thinking that it might be printing to quick, but that was not it.
– honeybadger_execute
Nov 16 '18 at 20:18
Only chrome works, please refer to stackoverflow.com/questions/35625178/…
– Miller Cy Chan
Nov 17 '18 at 2:59
If you want to print it for other browsers, you may capture the div as image then print. Please see my answer at stackoverflow.com/questions/51767557/…
– Miller Cy Chan
Nov 17 '18 at 3:03
add a comment |
0
0
0
Because the popup window does not include the css defined in the parent window. For easier to debug, better use variable content to store.
To print it with background highlight, only chrome browser works.
For more information, please refer to Background color not showing in print preview
<html>
<style type="text/css" media="all">
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow !important;
</style>
<script>
function escapeHtml(html)
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
function printTextArea()
let childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.write('<html><head>');
let styles = document.getElementsByTagName('style');
for(var i=0; i<styles.length; ++i)
childWindow.document.write(styles[i].outerHTML);
childWindow.document.write('</head><body>');
var content = escapeHtml(document.getElementById('textArea').value).replace(/n/gi,'<br>');
content = content.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.document.write(content);
childWindow.document.write('</body></html>');
childWindow.document.close();
childWindow.focus();
setTimeout(function ()
childWindow.print();
childWindow.close();
, 500);
</script>
<body>
<textarea id="textArea">FAIL: ABC
FAIL: DE</textarea>
<button onclick="printTextArea()">print TextArea</button>
</body>
</html>
answered Nov 16 '18 at 3:38
Miller Cy ChanMiller Cy Chan
403410
Because the popup window does not include the css defined in the parent window. For easier to debug, better use variable content to store.
To print it with background highlight, only chrome browser works.
For more information, please refer to Background color not showing in print preview
<html>
<style type="text/css" media="all">
body
-webkit-print-color-adjust: exact !important;
.highlight
background-color: yellow !important;
</style>
<script>
function escapeHtml(html)
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
function printTextArea()
let childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.write('<html><head>');
let styles = document.getElementsByTagName('style');
for(var i=0; i<styles.length; ++i)
childWindow.document.write(styles[i].outerHTML);
childWindow.document.write('</head><body>');
var content = escapeHtml(document.getElementById('textArea').value).replace(/n/gi,'<br>');
content = content.replace(/FAIL/g,"<span class='highlight'>FAIL</span>");
childWindow.document.write(content);
childWindow.document.write('</body></html>');
childWindow.document.close();
childWindow.focus();
setTimeout(function ()
childWindow.print();
childWindow.close();
, 500);
</script>
<body>
<textarea id="textArea">FAIL: ABC
FAIL: DE</textarea>
<button onclick="printTextArea()">print TextArea</button>
</body>
</html>
answered Nov 16 '18 at 3:38
Miller Cy ChanMiller Cy Chan
403410
edited Nov 17 '18 at 2:55
answered Nov 16 '18 at 3:38
Miller Cy ChanMiller Cy Chan
403410
answered Nov 16 '18 at 3:38
Miller Cy ChanMiller Cy Chan
403410
answered Nov 16 '18 at 3:38
Miller Cy ChanMiller Cy Chan
403410
403410
Give this a try:<textarea><span style="background-color: yellow">Text</span></textarea>
– Robby Cornelissen
Nov 16 '18 at 5:05
This code didn't work for me, I still don't see text highlighted in the print preview page. Did it work for you?
– honeybadger_execute
Nov 16 '18 at 20:01
So when i changed it to @RobbyCornelissen suggestion, i now see the color added to thechildWindow, but when hit click print, in the print preview I don't see the highlights anymore. I even increased the settimeout to a higher value thinking that it might be printing to quick, but that was not it.
– honeybadger_execute
Nov 16 '18 at 20:18
Only chrome works, please refer to stackoverflow.com/questions/35625178/…
– Miller Cy Chan
Nov 17 '18 at 2:59
If you want to print it for other browsers, you may capture the div as image then print. Please see my answer at stackoverflow.com/questions/51767557/…
– Miller Cy Chan
Nov 17 '18 at 3:03
add a comment |
Give this a try:<textarea><span style="background-color: yellow">Text</span></textarea>
– Robby Cornelissen
Nov 16 '18 at 5:05
This code didn't work for me, I still don't see text highlighted in the print preview page. Did it work for you?
– honeybadger_execute
Nov 16 '18 at 20:01
So when i changed it to @RobbyCornelissen suggestion, i now see the color added to thechildWindow, but when hit click print, in the print preview I don't see the highlights anymore. I even increased the settimeout to a higher value thinking that it might be printing to quick, but that was not it.
– honeybadger_execute
Nov 16 '18 at 20:18
Only chrome works, please refer to stackoverflow.com/questions/35625178/…
– Miller Cy Chan
Nov 17 '18 at 2:59
If you want to print it for other browsers, you may capture the div as image then print. Please see my answer at stackoverflow.com/questions/51767557/…
– Miller Cy Chan
Nov 17 '18 at 3:03
Give this a try:
<textarea><span style="background-color: yellow">Text</span></textarea>– Robby Cornelissen
Nov 16 '18 at 5:05
Give this a try:
<textarea><span style="background-color: yellow">Text</span></textarea>– Robby Cornelissen
Nov 16 '18 at 5:05
This code didn't work for me, I still don't see text highlighted in the print preview page. Did it work for you?
– honeybadger_execute
Nov 16 '18 at 20:01
This code didn't work for me, I still don't see text highlighted in the print preview page. Did it work for you?
– honeybadger_execute
Nov 16 '18 at 20:01
So when i changed it to @RobbyCornelissen suggestion, i now see the color added to the
childWindow, but when hit click print, in the print preview I don't see the highlights anymore. I even increased the settimeout to a higher value thinking that it might be printing to quick, but that was not it.– honeybadger_execute
Nov 16 '18 at 20:18
So when i changed it to @RobbyCornelissen suggestion, i now see the color added to the
childWindow, but when hit click print, in the print preview I don't see the highlights anymore. I even increased the settimeout to a higher value thinking that it might be printing to quick, but that was not it.– honeybadger_execute
Nov 16 '18 at 20:18
Only chrome works, please refer to stackoverflow.com/questions/35625178/…
– Miller Cy Chan
Nov 17 '18 at 2:59
Only chrome works, please refer to stackoverflow.com/questions/35625178/…
– Miller Cy Chan
Nov 17 '18 at 2:59
If you want to print it for other browsers, you may capture the div as image then print. Please see my answer at stackoverflow.com/questions/51767557/…
– Miller Cy Chan
Nov 17 '18 at 3:03
If you want to print it for other browsers, you may capture the div as image then print. Please see my answer at stackoverflow.com/questions/51767557/…
– Miller Cy Chan
Nov 17 '18 at 3:03
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330440%2fjavascript-print-textarea-with-text-highlighted-colors%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
