更改TextRange字体颜色，但不更改将在其旁边书写的文本

基础概念

TextRange 是一种用于处理文本对象中特定部分的对象，常用于网页设计和脚本编写中。它可以用来设置或获取文本的样式属性，如字体颜色、大小等，而不影响其他文本。

类型

基于DOM的TextRange：在浏览器环境中，可以使用JavaScript的DOM API来创建和操作TextRange对象。
基于CSS的TextRange：通过CSS选择器可以实现对特定文本的样式控制，虽然不是直接的TextRange对象，但可以达到类似效果。

应用场景

富文本编辑器：在编辑器中，用户可以选择文本并改变其颜色，而不影响其他文本。
动态内容展示：根据用户的操作或数据的变化，动态改变部分文本的显示样式。
教育应用：在在线教育平台中，可以用不同颜色突出显示关键词或重要概念。

问题与解决方案

假设遇到的问题是：在更改TextRange字体颜色时，旁边的文本也被更改了。

原因

这通常是因为错误地选择了整个元素或没有正确地限定TextRange的范围。

解决方案

使用JavaScript的DOM API来精确选择需要改变颜色的文本范围。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Text Color</title>
<style>
  .highlight {
    color: red;
  }
</style>
</head>
<body>

<p id="demo">这是一个 <span>示例</span> 文本。</p>

<button onclick="changeColor()">点击改变颜色</button>

<script>
function changeColor() {
  var textNode = document.createTextNode("示例");
  var span = document.createElement("span");
  span.className = "highlight";
  span.appendChild(textNode);
  
  var p = document.getElementById("demo");
  var range = document.createRange();
  range.setStart(p.firstChild, 3);
  range.setEnd(p.firstChild, 5);
  
  var fragment = range.createContextualFragment(span.outerHTML);
  range.deleteContents();
  range.insertNode(fragment);
}
</script>

</body>
</html>

在这个示例中，我们创建了一个TextRange对象来选择“示例”这个词，并将其包裹在一个<span>元素中，然后通过CSS类.highlight来改变颜色。这样，只有“示例”这个词的颜色会被改变，而其他文本不受影响。