Javascript 使用DOM元素围绕用户选定文本中的每个单词

来自用户选定文本的DOM片段：

你好，世界！
你好!

我想在每个单词周围加一个

，即：

<h1><span class="foo">Hello</span> <span class="foo">world!</span></h1>
<p><span class="foo">How</span> <b><span class="foo">do</span> <span class="foo">y<i>o<i>u</span></b> <span class="foo">do?</span></p>

你好，世界！
你好!

如何在javascript中实现这一点

---

现在，我所拥有的是：

// Get highlighted text
var selection = window.getSelection();

// Iterate over ranges
for (var i = 0, l = selection.rangeCount; i < l; ++i) {(function () {
  var range = selection.getRangeAt(i);

  var fragment = range.cloneContents();

  // HELP HERE: Surround each word in the fragment...

}())}

//获取突出显示的文本
var selection=window.getSelection（）；
//在范围内迭代
对于（var i=0，l=selection.rangeCount；i

请将您的javascript发布到您可以使用的页面。拆分（“”）问题的答案中有一段javascript可能会有所帮助。

// Get highlighted text
var selection = window.getSelection();

// Iterate over ranges
for (var i = 0, l = selection.rangeCount; i < l; ++i) {(function () {
  var range = selection.getRangeAt(i);

  var fragment = range.cloneContents();

  // HELP HERE: Surround each word in the fragment...

}())}