选择前后附加和删除字符 [英] 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, that way if there are any extra spaces the characters will still be removed.

例如，当双击文本时，它将选择文本，但不会选择前后的反引号.然后，我想删除那些反引号.

For example, when double clicking on the text, it will select the text, but not the backticks before and after. I want to then remove those backticks.

我可以在其中添加字符，但是仅选择文本而不是多余字符时，我不知道如何删除它们.

I have it where I can add characters to the selection, but when only selecting the text and not the extra characters, I do not know how to remove them.

$(document).on('click', 'button', function(e) {
  var target = $(this).attr('class');
  var str = window.getSelection();
  var text = str.toString().trim();
  var l = text.length;

  if ($(str.baseNode).closest('.input').length > 0) {
    switch (target) {
      case 'test':
        if ((text.charAt(0) != "`" && text.charAt(l - 1))) {
          var replacementText = "`" + text + "` ";
        } else {
          var rid = text.replace(/`/g, '');
          var replacementText = rid + ' ';
        }
        break;
    }
    formatSelection(str, text, replacementText);
  }
});

// format with buttons
function formatSelection(str, text, replacementText) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(document.createTextNode(replacementText));
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();

    range.text = replacementText;
  }
}

.input {
  border: 1px solid #ccc;
  padding: 10px;
}

p {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="test">format</button>

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

推荐答案

我建议使用纯JS的另一种方法，请参见代码段中的注释:

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>

这篇关于选择前后附加和删除字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！