如何在内容可编辑 div 中突出显示第一个退格键上以“<>”开头的单词，并在第二个退格键上删除相同的单词

Question

const textareaHtml = `
  <div class="textarea-item">
    <div class="edit" role="textbox" contenteditable="true" id="${textareaId}">
    </div>
    <ul class="autocomplete-list"></ul>
  </div>`;
$(".textarea-container").append(textareaHtml);

我有一个可以做笔记的应用程序，您可以通过输入“<>”来引用另一个笔记，这会打开我可以添加的其他笔记的下拉列表。基本上我希望能够通过先突出显示然后删除整个内容（“<>注释”）来删除它。我如何为可内容编辑的 div 实现此目的。找到文本区域的答案，但无法获取光标并突出显示此内容。谢谢你。

我尝试使用插入位置，但找不到文本区域中 selectstart 和 end 的替代品。

Answer 1

// Assuming 'textareaId' is the ID of your contenteditable div
const contenteditableDiv = document.getElementById(textareaId);

// Function to select a range of text within a contenteditable div
function selectText(start, end) {
  const range = document.createRange();
  range.setStart(contenteditableDiv.firstChild, start);
  range.setEnd(contenteditableDiv.firstChild, end);
  
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

// Function to delete the currently selected text
function deleteSelectedText() {
  const selection = window.getSelection();
  if (!selection.isCollapsed) {
    selection.deleteFromDocument();
  }
}

// Add an event listener to the contenteditable div
contenteditableDiv.addEventListener('keydown', (event) => {
  if (event.key === 'Backspace' || event.key === 'Delete') {
    deleteSelectedText();
  }
});

// Example usage: select and delete text from 10th to 20th character
selectText(10, 20);
deleteSelectedText();