qGuide: Batch Paste from Clipboard

<span style="color:#FFC69B; font-size:x-large; font-style:italic;"
>Paste from Clipboard</span><a title="
arrLines[0] → q_Email, 
arrLines[1] → q_Country,
arrLines[2] → q_Birth,
arrLines[3] to End → q_Remarks
"> <span style="font-size: x-large;" class="material-icons">help_outline</span></a><br>

<button type="button" onclick="user_batchPaste()">
 Batch Paste <span class="material-icons">content_paste_go</span></button>
<button type="button" onclick="user_showClipboard()">
 (show only) <span class="material-icons">content_paste_search</span></button>

<div id="user_Sandbox" style="padding:2px; margin:5px; border: 3px solid #FFC69B; "
>(Clipboard Viewer...)</div>

<script>
function user_batchPaste () {
  let elSandbox = document.querySelector ( '#user_Sandbox' );  // ★★★ EDIT (Selector ID) ★★★

  /// Remove all nodes and elements
  while ( elSandbox.firstChild ){
    elSandbox.removeChild ( elSandbox.firstChild );
  }
  const dateCurrent = new Date();
  console.log( '[' + dateCurrent + '] sandbox removed' );

  navigator.clipboard.readText().then( strClipText => {
    let strLines = convertLineEndingsToLF( strClipText );
    let arrLines = strLines.split( '\n' ); // Split with LF
    /// Set to qData fields
    qbpms.form.set( 'q_Email',   arrLines[0] );    // ★★★ EDIT (Field Name and Line ID) ★★★
    qbpms.form.set( 'q_Country', arrLines[1] );    // ★★★ EDIT (Field Name and Line ID) ★★★
    qbpms.form.set( 'q_Birth',   arrLines[2] );    // ★★★ EDIT (Field Name and Line ID) ★★★
    qbpms.form.set( 'q_Remarks', arrLines.slice(3).join('\n') );  // ★★★ EDIT (Field Name and Line ID) ★★★
    /// Add text nodes
    for( let i = 0; i < arrLines.length; i++ ){
      elSandbox.appendChild( document.createTextNode( arrLines[i] ) );
      elSandbox.appendChild( document.createElement( 'br' ) );
    }
    return;
  }).catch( err => {
    console.error( 'Failed to read clipboard contents: ', err );
  });
}

/**
 * Reads the text from the user's clipboard and displays it in a specified HTML element.
 * The element with the given selector ID will have its content replaced with the clipboard text.
 * If reading the clipboard fails, an error will be logged to the console.
 * Requires the "clipboard-read" permission.
 *
 * @example
 * // Assuming there is an element with the ID 'user_Sandbox' on the page
 * user_showClipboard();
 */
function user_showClipboard () {
  let elSandbox = document.querySelector ( '#user_Sandbox' );  // ★★★ EDIT (Selector ID) ★★★

  /// Remove all nodes and elements
  while ( elSandbox.firstChild ){
    elSandbox.removeChild ( elSandbox.firstChild );
  }
  const dateCurrent = new Date();
  console.log( '[' + dateCurrent + '] sandbox removed' );

  navigator.clipboard.readText().then( strClipText => {
    let arrLines = strClipText.split('\n');
    /// Add text nodes
    for( let i = 0; i < arrLines.length; i++ ){
      elSandbox.appendChild( document.createTextNode( '[' + i + ']: ' + arrLines[i] ) );
      // elSandbox.appendChild( document.createTextNode( arrLines[i] ) );
      elSandbox.appendChild( document.createElement( 'br' ) );
    }
    return;
  }).catch( err => {
    console.error( 'Failed to read clipboard contents: ', err);
  });
}

/**
 * Converts line endings (CRLF, CR) to LF in the given text.
 *
 * @function
 * @param {string} text - The text with line endings to be converted.
 * @returns {string} The converted text with LF line endings.
 */
function convertLineEndingsToLF(text) {
  return text.replace( /\r\n|\r/g, '\n' );
}
</script>