Question

我试图在一个满足的范围内做一些基本的语法突出显示。它可以工作，我可以替换这个单词，使其包裹在一个样式中，但我输入的任何其他文本都保留在这些跨度标记内。

继承我的代码：

hiliter("Carrot", document.getElementById("myText"));
placeCaretAtEnd(document.getElementById("myText"));

function hiliter(word, element) {
  var rgxp = new RegExp(word, 'g');
  var repl = '<span style="color:red;">' + word + '</span>';
  element.innerHTML = element.innerHTML.replace(rgxp, repl);
  console.log(element.innerHTML);
}

function placeCaretAtEnd(el) {
    el.focus();
if (typeof window.getSelection != "undefined"
        && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
}
}

编辑：这是一个显示问题的小提琴。如果您在框中单词文本和单词'test'并单击突出显示它将突出显示该单词。但之后，您输入的任何文本都会保留在这些span标记内，而不是在结束标记之后。您可以点击show html按钮进行验证。

https://jsfiddle.net/f3wmekLL/

语法突出显示在一个contenteditable

0 个答案: