我想使用 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

這樣做的一種方法可能是執行以下操作：

• 獲取 window 選擇。
• 將選擇轉換為字符串以獲取文本。
• 創建將是粗體的元素。
• 將parentElement的innerHTML中包含的選定文本替換為粗體元素。

基於您提供的代碼的示例：

 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>

請注意，您可能希望在創建粗體元素時添加更多邏輯，以處理任何現有文本已經是粗體的情況。