如何使用html标记从window.getSelection（）。getRangeAt（0）中包装文本选择？

如何从window.getSelection（）。getRangeAt（0）中选择并使用HTML标记（例如’span’或’mark’）将其包围？ 我更喜欢直接的javascript或jQuery解决方案。

我能够使用alert输出所选文本，但还没有弄清楚如何用额外的标记来包围它。 我已经看到很多关于选择运行execCommand的例子，但这不是我想要的。

请参阅jsfiddle的工作示例

有任何想法吗？ 谢谢

Answer 1

如果所选文本全部包含在单个文本节点中，则可以使用Range的surroundContents()方法。 但是，这在一般情况下不起作用。 要做的是围绕 Range的每个文本节点。 我的Rangy库有一个模块可以执行此操作并跨浏览器工作（IE <= 8本身不支持DOM范围）。

使用Rangy的示例代码：

Answer 2

（根据我发布的时候发现的类似问题回答我自己的问题…）

这个Q＆Apost中的人都在一个有趣的轨道上。 它只使用了与我想要的格式不同的格式。 修改他们的代码，我能够做到以下几点：

 
Display Range | Mark Range
 
 This is sample text. You should be able to type in this box or select anywhere in this div and then click the link at the top to get the selected range. 
  

我可以进一步抽象btnMark.click（）函数中的代码来接受标记名称，然后创建一行按钮以使用mark，pre，blockquote标记代码。

可以在这里找到一个有效的解决方案： http ： //jsfiddle.net/3tvSL/

Answer 3

首先得到范围：

 var savedRange; savedRange = window.getSelection().getRangeAt(0); 

点击按钮：

  function formatCode(e){ var textAreaVal = document.getElementById('divWithContentEditable').innerText; if(textAreaVal.length>0){ var newtxt = '
'+savedRange+'
' replaceIt($('#topicDetails')[0], newtxt); } } 
 在文本周围添加/替换元素： 
 replaceIt(txtarea, newtxt) { $(txtarea).text(newtxt)); } 
 当然，您可以使用Rangy，但我发现不建议添加额外500kb的简单要求。