如何使用JavaScript为Div中选中的特定文本修改字体？

嘿，我明白你的需求——现在你的代码会把整个Div的字体都改掉，但你只想修改高亮选中的那部分文本对吧？没问题，我们可以通过操作文本选区来实现这个效果，具体调整如下：

修改后的JavaScript代码 #

function changeFont(font) {
  // 获取当前选中的文本选区
  const selection = window.getSelection();
  // 检查是否有选中内容，且选中内容在目标Div内
  if (selection.rangeCount > 0 && document.getElementById("note_header").contains(selection.anchorNode)) {
    const range = selection.getRangeAt(0);
    // 创建一个span元素来包裹选中的文本
    const span = document.createElement('span');
    span.style.fontFamily = font.value;
    // 将选中的内容移动到span中
    range.surroundContents(span);
    // 恢复选区（可选，让用户能继续编辑）
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

代码说明 #

• 核心用window.getSelection()获取用户当前选中的文本区域，这是实现局部修改的关键
• 增加判断条件：确保有选中内容，且选中内容确实在note_header这个Div内，避免误修改其他区域的文本
• 创建<span>标签包裹选中文本，只给这个span设置字体，这样就不会影响整个Div的文本样式
• 最后恢复选区是为了让用户操作后还能继续编辑选中内容，提升使用体验

你的HTML代码可以保留不变 #

高亮文本并修改字体<br>
<select id="select_font" onchange="changeFont(this);">
  <option value="Arial">Arial</option>
  <option value="Sans Serif" selected>Sans Serif</option>
  <option value="Courier New">Courier New</option>
  <!-- 可以继续添加更多字体选项 -->
</select>
<div id="note_header">这里是可以选中修改字体的文本内容</div>

这样调整后，你选中一段文本再从下拉框选字体，就只会改变选中部分的字体啦～

内容的提问来源于stack exchange，提问作者user8991131