Я хочу сделать текстовый редактор HTML, имеющий жирный функционал, используя window.getSelection

Question

Делает весь текст жирным. Я хочу, чтобы только выделенный текст выделялся жирным шрифтом (строго не выполняется команда)

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>

Обратите внимание, что при создании элемента, выделенного жирным шрифтом, может потребоваться добавить дополнительную логику для обработки, если какой-либо существующий текст уже выделен жирным шрифтом.