永久更改所选文本的颜色，并使用JavaScript在HTML中还原_Javascript_Html_Dom

永久更改所选文本的颜色，并使用JavaScript在HTML中还原

javascript html dom

永久更改所选文本的颜色，并使用JavaScript在HTML中还原,javascript,html,dom,Javascript,Html,Dom,我想能够选择文本点击一个按钮，并有文字颜色的变化e。不再选择文本后，文本颜色更改应保持不变我知道已经有很多解决方案可以做到这一点。然而；我希望能够访问节点，以便在单击另一个按钮时，可以恢复颜色更改。我曾尝试查看窗口。getSelection（）和范围和文档片段，但我在理解如何选择文档片段中的节点、修改每个节点、将其插入文档中的正确位置以及创建引用时遇到困难，以便在以后的单击中，再次将颜色改回黑色我还发现它基本上做了我想做的事情，但它使用了过时的execCommand 我不想要CSS解决方案，

我想能够选择文本点击一个按钮，并有文字颜色的变化e。不再选择文本后，文本颜色更改应保持不变

我知道已经有很多解决方案可以做到这一点。然而；我希望能够访问节点，以便在单击另一个按钮时，可以恢复颜色更改。我曾尝试查看

窗口。getSelection（）

和

范围

和

文档片段

，但我在理解如何选择文档片段中的节点、修改每个节点、将其插入文档中的正确位置以及创建引用时遇到困难，以便在以后的单击中，再次将颜色改回黑色

我还发现它基本上做了我想做的事情，但它使用了过时的execCommand

我不想要CSS解决方案，也不想要使用jQuery的解决方案

下面是我正在使用的具有类似html结构的js代码和codepen

我有两个按钮，一个改变选择的颜色，一个即使文本不再被选择，也会恢复选择的颜色

我正在使用

window.getSelection（）

获取所选文本的

选择

。我检查

选择

是否有效，然后获取

getRangeAt（0）

的范围，然后调用

extractContents（）

这是最难的部分，因为：

它从文档中提取

DocumentFragment

，那么如何将

DocumentFragment

重新插入到提取它的相同位置

我很难弄清楚如何修改

DocumentFragment

样式中的节点

最小可重复示例-


改变颜色

更改为以前的颜色
Javascript
changeColor=（）=>{
document.getElementById（“演示”）.style.color=“红色”
}
changeColorBack=（）=>{
document.getElementById（“演示”）.style.color=“黑色”
}

这就是你想要的吗？

你想永久更改文本颜色还是只在被选中时更改文本颜色？你想更改某些内容的颜色，但不想使用CSS？请分享你已经尝试过的内容，并提供一个你可以添加的颜色类。如果整个选择都在一个节点上，这很容易。它会变得更复杂d当跨越多个文本节点、部分的等时。任务相当复杂，很容易获得节点，但如果有跨元素选择，则必须创建新元素，以便填充封闭元素的所有插入和布局规则。例如，从表中选择两个单元格，另外还有some表格下面的文本，你不能仅仅用想要的颜色样式将所选内容包装在HTML元素中，你需要在表格内和表格后添加多个元素。否。我正在处理一个最小的可复制示例。流程是：1.用户选择dom的某个部分。2.用户单击按钮3.所选文本不应即使取消选择，也可以使用不同的颜色。我现在知道了。可以提高问题的清晰度，以便更准确地理解。我添加了一个示例

var changeColorButton = document.getElementById('xyz');
var revertColor = document.getElementById('zyx');

const changeSelectionColor = () => {
  let selection = window.getSelection()
  if (selection) {
    let range = selection.getRangeAt(0)
    if (range) {
      let frag = range.extractContents();
    }
    /*
      2 problems:
      1. accessing each node in the DocumentFragment and modifying the style then re-inserting into the correct spot
      2. Creating a reference to this fragment for revertColorChange() to use to change the color back to black
    */
  }
}

const revertColorChange = () => {
  // revert color
}

changeColorButton.addEventListener('click', changeSelectionColor);

<!DOCTYPE html>
<html>
<body>

<button onClick="changeColor()">Change color</button><br/>
<button onClick="changeColorBack()">Change to previous color</button>
<p id="demo">Javascript</p>

<script>
changeColor=()=>{
document.getElementById("demo").style.color ="red"
}

changeColorBack=()=>{
document.getElementById("demo").style.color ="black"
}

</script>

</body>
</html>