JSFiddle - React, Tailwind, and code Playground

HTML

<input style='width: 100%'/>

JavaScript

document.addEventListener('paste', (event) => {
  let clipboardData = event.clipboardData || window.clipboardData;
  if (!clipboardData) return;
 
  let pastedData = clipboardData.getData('Text');
  if (!pastedData) return;
 
  let replacedData = pastedData.replace(/https:\/\/x\.com/g, 'https://twitter.com');
  console.log(replacedData)
 
  if (pastedData !== replacedData) {
    // Add a newline character after the replaced text
    replacedData += '\n';
 
    // Prevent the default paste action
    event.stopPropagation();
    event.preventDefault();
 
    // Insert the modified data
    let target = event.target;
    if (target.value !== undefined) {
      // Insert the modified text for input or textarea fields
      let start = target.selectionStart;
      let end = target.selectionEnd;
      let textBefore = target.value.slice(0, start);
      let textAfter = target.value.slice(end);
      target.value = textBefore + replacedData + textAfter;
      target.selectionStart = target.selectionEnd = start + replacedData.length;
    } else if (target.isContentEditable) {
      // Insert the modified text for contenteditable elements
      let selection = window.getSelection();
      if (selection.rangeCount > 0) {
        let range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(replacedData));
        // Move the caret to the end of the inserted text node
        range.setStart(range.endContainer, range.endOffset);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
 
    // Send log message to background script
  }
});