javascript - 在span vanilla Javascript中将单词换行

Question

我有一个函数可以返回一个单词列表(带有上一个和下一个qord)。我能够使用正则表达式正确定位文本中的单词，并知道上一个和下一个单词(所以我只找到一次该单词，而不是全部相同)。我实际上使用 Javascript 的替换函数将其包装在 SPAN 中:

var re = RegExp("(?:^\\W*|(" + 
    motBefore.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")\\W+)" +
    motErreur.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?:\\W+(" +
    motAfter.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")|\\W*$)", "g");
document.getElementById('edth_corps').innerHTML =
    document.getElementById('edth_corps').innerText
        .replace(re, motBefore + " " + '<span id="' + nbId +
        '" class="erreurOrthographe" ' +
        'oncontextmenu="rightClickMustWork(event, this);return false"> '
        + motErreur + '</span>' + " " + motAfter);

但事实是，因为我被放在这三个单词的组中，所以我必须把前后的单词还给他。

我使用这项技术遇到的问题是，我丢失了所有标点符号，更重要的是，如果有字体标签(或粗体、斜体、下划线)，我会丢失它们。

我想用一个跨度来包裹这个单词，就像它是当前节点的子节点一样，这个单词所在的节点不接触上一个和下一个单词(它们应该在这里，所以我们有正确的单词而不是另一个单词)这个词的出现)。

但是我不知道该怎么做，因为我只能使用旧的Javascript(IE编译器设置为IE5的兼容模式，并且这个函数是我无法为这个版本重写的唯一函数)。我无法使用像 Jquery 这样的库(我已经看到很多带有此插件的解决方案)。

有人能指出我正确的方向吗？即使错误词周围没有父词而只是句子的一部分，insertBefore 还能工作吗？

Answer 1

这不是一个完整的答案，但希望它有用。您可以在 IE 中使用 TextRange 对象来修改元素中的文本。这类似于 the W3C Range object ，但老版本的IE支持。使用此对象，您可以选择文本、查找文本和修改文本。

找到所需的文本将是棘手的部分，但是一旦找到它并在范围内选择它，修改 HTML 就很容易了。

作为一个简单的例子，我创建了 a Fiddle在 div 中查找字符串并用 span 包围它:

var findString = "JavaScript";
var content = document.getElementById("content");
var textRange = document.body.createTextRange();
textRange.moveToElementText(content);
if (textRange.findText(findString)) {
  var html = "<span class='selected'>" + findString + "</span>";
  textRange.pasteHTML(html);
}

希望这有帮助。