Javascript print textarea with text highlighted colors

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?

edited Nov 16 '18 at 2:11

asked Nov 16 '18 at 2:03

honeybadger_execute

14411

add a comment |

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?

edited Nov 16 '18 at 2:11

asked Nov 16 '18 at 2:03

honeybadger_execute

14411

add a comment |

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?

edited Nov 16 '18 at 2:11

asked Nov 16 '18 at 2:03

honeybadger_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

edited Nov 16 '18 at 2:11

asked Nov 16 '18 at 2:03

honeybadger_execute

14411

edited Nov 16 '18 at 2:11

asked Nov 16 '18 at 2:03

honeybadger_execute

14411

edited Nov 16 '18 at 2:11

asked Nov 16 '18 at 2:03

honeybadger_execute

14411

asked Nov 16 '18 at 2:03

honeybadger_execute

14411

asked Nov 16 '18 at 2:03

honeybadger_execute

14411

add a comment |

1 Answer
1

active

oldest

votes

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>

Setting for chrome to print the background

edited Nov 17 '18 at 2:55

answered Nov 16 '18 at 3:38

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

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

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

Setting for chrome to print the background

edited Nov 17 '18 at 2:55

answered Nov 16 '18 at 3:38

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

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 |

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

Setting for chrome to print the background

edited Nov 17 '18 at 2:55

answered Nov 16 '18 at 3:38

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

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 |

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

Setting for chrome to print the background

edited Nov 17 '18 at 2:55

answered Nov 16 '18 at 3:38

Miller Cy Chan

403410

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

Setting for chrome to print the background

edited Nov 17 '18 at 2:55

answered Nov 16 '18 at 3:38

Miller Cy Chan

403410

edited Nov 17 '18 at 2:55

answered Nov 16 '18 at 3:38

Miller Cy Chan

403410

answered Nov 16 '18 at 3:38

Miller Cy Chan

403410

answered Nov 16 '18 at 3:38

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

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

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

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

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 |

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

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky