复制带有颜色和样式的文本

Question

This is the JavaScript code to copy text:

$(function() {
  $("#copyAndopenOutlook").click(function(e) {
    e.preventDefault();
    // Code below
    
    var newLine = "\n";
    
    var emailBodyText = "";
    
    emailBodyText = emailBodyText + "This line I want bold" + newLine;
    emailBodyText = emailBodyText + "This is just another line for practice" + newLine + newLine;
    emailBodyText = emailBodyText + "This is the last line, I want it green color";
    
    
    const el = document.createElement('textarea');
    el.value = emailBodyText;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    
    // alert("Text is copied, and can now be pasted into outlook new mail");
    
    var mail = document.createElement("a");
    mail.href = "mailto:someone@example.com?subject=Test ";
    mail.click();
    
    // Code Above
    });
});

I want to copy this and paste it in Outlook, that I have working, but how can I make the first line bold, and last line green color? I have tried with adding <b> in the code, and also for color, but it just copies the and color tags.

Answer 1

If you want to mark up the text, you need an element that supports HTML content. For instance, here's a version using a div and the Selection object .

 $(function() { $("#copyAndopenOutlook").click(function(e) { e.preventDefault(); // Code below const newLine = "\n"; let emailBodyText = ""; emailBodyText = emailBodyText + "<strong>This line I want bold</strong>" + newLine; emailBodyText = emailBodyText + "This is just another line for practice" + newLine + newLine; emailBodyText = emailBodyText + "<span style='color: green'>This is the last line, I want it green color</span>"; const el = document.createElement('div'); el.innerHTML = emailBodyText; el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); const sel = getSelection(); sel.setBaseAndExtent(el, 0, el, el.childNodes.length); document.execCommand('copy'); document.body.removeChild(el); alert("Text is copied, and can now be pasted into outlook new mail"); /* var mail = document.createElement("a"); mail.href = "mailto:someone@example.com?subject=Test "; mail.click(); */ // Code Above }); });

 <input type="button" id="copyAndopenOutlook" value="Copy"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Some truly obsolete browsers may not support the Selection object, but anything modern will.

You may need <br> instead of \n , or if the "lines" are actually paragraphs, perhaps <p>...</p> .

Answer 2

or if you want to do it with Clipboard API:

  const type = "text/html";
  const text = `<p style="color:red">this is in red</p>`;
  const blob = new Blob([text], { type });
  const data = [new ClipboardItem({ [type]: blob })];

  navigator.clipboard.write(data).then(
    () => {
      /* success */
    },
    () => {
      /* failure */
    }
  );