如何使用 javascript 为所选项目设置新内容？

Question

假设我们有一段内容为“嗨，这是stackoverflow中的一个新问题！”
当我们在本段中选择某些内容时，它会变成红色。例如，我们选择了 stackoverflow，然后它变成了<span class="red">stackoverflow</span>。我们如何使用 Javascript 来做到这一点？
这是我的代码：

var x = {};
x.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();

    } else if (document.getSelection) {
        t = document.getSelection();

    } else if (document.selection) {
        t = document.selection.createRange().text;

    }
    return t;
}

$(document).ready(function() {
  var selectedText;
    $(document).bind("mouseup", function() {
      selectedText = x.getSelected()
      if (selectedText !=''){
      alert(selectedText);
//Now I wanna set new content for selected item but not working
        a=selectedText;
        selectedText.html("<span class='red'>"+a+"</span>");
        
      }
    });
});

.red {
  color : red;
}

<p>suppose to be we have a paragraph with this content " Hi , It's a new question in stackoverflow!" and when we are selecting something in this paragraph , it's turn to be Red .for example we selected stackoverflow & then it turn to .how can we do this with Javascript? </p>

Answer 1

...当我们在本段中选择某些内容时，轮到 红...

你可以在 the styleWithCSS command of the editing API, execCommand that is 上一搏。

但是，在继续之前，请注意：

此规范不完整，预计不会推进 超出草稿状态。作者不应使用这些功能中的大部分 直接，而是使用 JavaScript 编辑库。特点 本文档中描述的实施不一致或不完全 由用户代理，预计这不会改变 可预见的未来......这个规范旨在帮助实现 在标准化这些现​​有功能。据预测，在 未来这两个规范都将被内容可编辑事件和 输入事件....

澄清后，以下内容将适用于大多数现代浏览器，即。我可以在其中测试的 Edge、FireFox 和 Chrome。

默认情况下，execCommand 的 foreColor 命令会使用字体标签包裹选定的文本，但不推荐使用该字体标签。因此，您需要使用styleWithCSS 命令。现在这适用于编辑 API，这意味着您尝试使用的元素应该具有其 contentEditable 属性集。

要解决此问题，您可以在更改所选文本片段的颜色之前临时设置此属性，然后在完成后重置该属性。

鉴于你的段落是这样的：

<p id="p">
  Hi , It's a new question in StackOverflow!
</p>

当你选择StackOverflow这个词时，下面的代码会导致这个...

<p id="p">
  Hi , It's a new question in <span style="color: rgb(255, 0, 0);">StackOverflow</span>!
</p>

... 将您选择的文本包装在 span 中，并应用 style。

小提琴：http://jsfiddle.net/abhitalks/j9w6dj7m/

片段：

p = document.getElementById('p');
p.addEventListener('mouseup', setColor);
function setColor() {
    p.setAttribute('contentEditable', true);
    document.execCommand('styleWithCSS', false, true);
    document.execCommand('foreColor', false, "#f00");
    p.setAttribute('contentEditable', false);
}

<p id="p" contentEditable="false">
    Hi , It's a new question in stackoverflow!
</p>

---

编辑：

现在您已经在问题中添加了代码（以及您已经尝试过的内容），您可以使用range 选择来完成您所追求的事情。

具体来说，你需要学习：

1. selection：https://developer.mozilla.org/en-US/docs/Web/API/Selection，这个你已经完成了。干杯！
2. range: https://developer.mozilla.org/en-US/docs/Web/API/Range/Range，因为您将在这里处理范围
3. selection.getRangeAt()：https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt，因为您需要将选定的文本提取为范围对象
4. range.surroundContents()：https://developer.mozilla.org/en-US/docs/Web/API/range/surroundContents，因为您需要用span 包围选定的文本范围。

把它们放在一起你所要做的就是（代码cmets中的解释）：

function setClass() {
    var selection = x.getSelected(), range, // you have already done this
        span = document.createElement("span"); // create a span element
    span.classList.add('red'); // add the class to the span
    if (selection != '') {
      range = selection.getRangeAt(0); // get the range from selected text
      range.surroundContents(span); // surround the range with span
    }  
}

小提琴 2：http://jsfiddle.net/abhitalks/kn0u5frj/

片段 2：

var x = {}, 
    p = document.getElementById('p');

p.addEventListener('mouseup', setClass);

function setClass() {
    var selection = x.getSelected(), range, 
        span = document.createElement("span");
    span.classList.add('red');
    if (selection != '') {
        range = selection.getRangeAt(0);
        range.surroundContents(span);
    }  
}

x.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

.red { color: #f00; }

<p id="p">
  Hi , It's a new question in stackoverflow!
</p>

Answer 2

可以使用getSelection()方法

下面是例子：

重复的问题： How to get selected text in textarea?

Answer 3

你可以使用 CSS 和 :: selection http://caniuse.com/#search=%3A%3Aselection

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

或带有范围的javascript