JSFiddle - React, Tailwind, and code Playground

COPY_TO_CLIPBOARD

by Dumine Stefan Daniel

HTML

<div class="g-c" id="Login_Simple__steps" style="display: block;">
  <div class="g">
    <div class="g-h passed"><span class="ui-icon ui-icon-triangle-1-e"></span><span class="ui-icon ui-icon-check marker-1-e"></span>Go to ' <a href="http://10.0.10.132/PISON_3.0.0_MNP_MOBILIS/app/login" target="_blank">http://URL/app/login</a> '<span class="right">Time: 00:00:05.635</span>
    </div>
  </div>
</div>
<br>
<br>
<button onclick="copyToClipboard('Login_Simple__steps')">Copy TEXT</button>
<button onclick="pasteFromClipboard('description')">Paste TEXT</button>
<br>
<br>
<textarea style="margin: 0px; width: 600px; height: 100px;"></textarea>
<br>
<br>
<p id="output" style="font-family:courier"></p>

<textarea onclick="execCommand('Paste')" id="description" name="description" style="margin: 0px; width: 600px; height: 100px;" > 

JIRA description </textarea>

JavaScript

function copyToClipboard(elementId) {
  var text = document.getElementById(elementId).innerText;
  var lines = text.split('\n');
  var current_line = 0;
  var steps = "bq.*STEPS:* \n\n\n";
  steps += "(/) " + lines[current_line].split('Time: 00')[0] + "\n";

  // create textarea and 'copy' temp content
  var aux = document.createElement("textarea");
  aux.setAttribute("id", "temp");
  aux.setAttribute("style", "margin: 0px; width: 600px; height: 100px;");
  aux.value = steps;
  document.body.appendChild(aux);
  document.querySelector('#temp');
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);  // Remove it from the body
  
  document.getElementById("output").innerText = "This will be copied to clipboard:\n\n" + steps;
}

function pasteFromClipboard(elementId) {
  document.querySelector("#" + elementId).select().execCommand("Paste");
}

function pasteFromClipboard2(elementId) {
    var editor = document.getElementById(elementId);
    editor.focus();
  //  editor.select();
    document.execCommand('Paste');
}