我想使用 window.getSelection 制作一个具有粗体功能的 HTML 文本编辑器

Question

它使整个文本加粗。我只想将选定的文本加粗（绝对没有 exec 命令）let boldBtn = document.getElementById('Bold-Btn');let boldClickListener = (event) =>{    event.preventDefault();    let selection = window.getSelection();    let final = `<span class="text-bold">${selection.focusNode.textContent}</span>`;    selection.anchorNode.parentElement.innerHTML=final;    console.log(selection);};boldBtn.addEventListener('click',boldClickListener);

Answer 1

这样做的一种方法可能是执行以下操作：

• 获取窗口选择。

• 将选择转换为字符串以获取文本。

• 创建将是粗体的元素。

• 更换包含在所选文本innerHTML的parentElement用粗体显示的元素。

基于您提供的代码的示例：

let boldBtn = document.getElementById('Bold-Btn');

let boldClickListener = (event) => {

  event.preventDefault();

  // Get selection

  let selection = window.getSelection();

  // Get string of text from selection

  let text = selection.toString();

  // Create bolded element that will replace the selected text

  let final = `<span class="text-bold">${text}</span>`;

  // Replace the selected text with the bolded element

  selection.anchorNode.parentElement.innerHTML = selection.anchorNode.parentElement.innerHTML.replace(text, final);

};

boldBtn.addEventListener('click', boldClickListener);

.text-bold {

  font-weight: bold;

}

<div>

Test this text

</div>

<button id="Bold-Btn">

Bold

</button>

请注意，您可能希望在创建粗体元素时添加更多逻辑来处理任何现有文本是否已经是粗体。