Append And Remove Characters Before And After Selection

How can I get the characters before AND after the selected text, and then remove them? Or rather, if the selected text is within the characters, remove the surrounding characters,

Solution 1:

I would suggest a different approach, using plain JS, see the comments in the snippet :

var newText;
const elem = document.querySelector('.input');

document.querySelector('.test').addEventListener('click', e => {
  // get the content of the div
  const text = elem.innerHTML;

  // get the selection, in a string format, trim the white spaces
  const selection = window.getSelection();
  const selectionContent = selection.toString().trim();

  // if there's a word selected
  if (selectionContent) {
    const range = selection.getRangeAt(0)

    // selected line
    const line = range.startContainer.data;

    // indexes of the section
    const startIndex = range.startOffset;
    const endIndex = range.endOffset;

    // check if the backticks are included in the selection
    const backticksIncluded = selectionContent.match(/\`.*?\`/g) ? true : false;

    // check if the selected word is wrapped with backticks    
    const hasBackticks = backticksIncluded || "`" + selectionContent + "`" === line.slice(startIndex - 1, endIndex + 1);

    // check if the selection has a space in the end
    const space = selection.toString().endsWith(" ") ? " " : "";

    if (hasBackticks) {
      // if the selected text with backticks is found, 
      // replace it with the original selection ( without backticks)
      const startContent = line.slice(0, startIndex - (backticksIncluded ? 0 : 1));
      const endContent = line.slice(endIndex + (backticksIncluded ? 0 : 1));

      const newWord = backticksIncluded ? selectionContent.slice(1, -1) : selectionContent

      newText = startContent + newWord + space + endContent;
    } else {
      // if it doesn't have backticks, 
      // replace the selected text with the one having backticks
      const startContent = line.slice(0, startIndex);
      const endContent = line.slice(endIndex);

      newText = startContent + "`" + selectionContent + "`" + space + endContent;
    }

    // set the new content to the div
    elem.innerHTML = elem.innerHTML.replace(line.trim(), newText);
  }
});

<button class="test">format</button>

<div contenteditable="true" class="input">hello `text` hello world</div>