js 实现划词选中并给选中的词赋予颜色

可以使用 JavaScript 的 Range 对象来实现划词选中并给选中的词赋予颜色。具体实现可以参考以下代码：

// 获取选中的文本
var selectedText = window.getSelection().toString();

// 创建一个 Range 对象
var range = window.getSelection().getRangeAt(0);

// 创建一个 span 元素，并设置样式
var span = document.createElement('span');
span.style.backgroundColor = 'yellow';

// 将选中的文本包裹在 span 元素中
range.surroundContents(span);

这段代码会将选中的文本包裹在一个带有黄色背景色的 span 元素中。你可以根据需要修改样式。

相关问题

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

可以使用 Range 对象来实现划词选中并给选中的词赋予颜色的效果。以下是一个简单的实现示例：

// 获取选中的文本
var selectedText = window.getSelection().toString();

// 创建一个 Range 对象
var range = window.getSelection().getRangeAt(0);

// 创建一个 span 元素，并设置样式
var span = document.createElement('span');
span.style.backgroundColor = 'yellow';

// 将选中的文本包裹在 span 元素中
range.surroundContents(span);

// 监听 span 元素的内容变化事件，以便更新选中的颜色
span.addEventListener('input', function() {
  span.style.backgroundColor = 'red';
});

这段代码可以实现选中文本后将其包裹在一个带有黄色背景色的 span 元素中，并且可以通过监听 span 元素的内容变化事件来更新选中的颜色。你可以根据自己的需求修改样式和事件处理逻辑。

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>