它使整个文本加粗。我只希望选定的文本变粗体(完全没有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);
执行此操作的一种方法可能是执行以下操作:
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>
请注意,如果任何现有文本已经为粗体,则在创建要处理的粗体元素时可能需要添加更多逻辑。