js 实现划词选中并给选中的词赋予颜色 且选中的文字可以编辑

可以使用 JavaScript 的 Range 对象来实现划词选中并给选中的词赋予颜色，同时也可以使用 contentEditable 属性来实现选中的文字可以编辑。以下是一个简单的实现示例：

// 获取选中的文本
function getSelectedText() {
  if (window.getSelection) {
    return window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
    return document.selection.createRange().text;
  }
  return "";
}

// 给选中的文本添加样式
function highlightSelectedText(color) {
  var range, sel;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      var newNode = document.createElement("span");
      newNode.style.backgroundColor = color;
      range.surroundContents(newNode);
    }
  } else if (document.selection && document.selection.type != "Control") {
    range = document.selection.createRange();
    range.execCommand("BackColor", false, color);
  }
}

// 监听鼠标抬起事件，获取选中的文本并添加样式
document.addEventListener("mouseup", function() {
  var selectedText = getSelectedText();
  if (selectedText) {
    highlightSelectedText("yellow");
  }
});

使用 contentEditable 属性来实现选中的文字可以编辑也很简单，只需要将需要编辑的元素的 contentEditable 属性设置为 true 即可：

<div contentEditable="true">这是可以编辑的文本</div>