javascript - 突出显示代码镜像文本区域中的错误行

Question

我有包含 C 代码的文本区域。我想根据几个关键字突出显示 onClick 行。我将该行存储在变量中并使用关键字检查每一行。

$('#error').click(
        function() {
            var editor= $("textarea[id='c-code']");
            var lines = editor.val().split('\n');
            editor.val(" ");
            for (var i = 0; i < lines.length; i++) {
                if (lines[i].contains("flag")) {
                    var value = '<mark>'
                            + lines[i] + '</mark>';
             editor.append(value );
            editor.append('\n');
                }
            }
        });

但是它不起作用。这是我的 jsfiddle testfiddle

谢谢。

Answer 1

您遇到的主要问题是 Codemirror 为您管理 textArea，因此您需要使用 CodeMirror 函数 getValue() 和 setValue( val 获取和设置 textArea )。

var cEditor = CodeMirror.fromTextArea(document.getElementById("c-code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/x-csrc",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
  });

$('#error').click(
  function () {
  var lines = cEditor.getValue().split('\n');
  for (var i = 0; i < lines.length; i++) {
    if (0 < lines[i].indexOf("flag")) {
      lines[i] = '<mark>' + lines[i] + '</mark>\n';
    }
  }
  cEditor.setValue(lines.join('\n'));
});

希望这有帮助。

编辑:根据评论，调整脚本以用颜色突出显示整行。

要以颜色突出显示整条线，以下链接可帮助提供指导:CodeMirror markText is not working和 https://github.com/perak/codemirror/issues/24 。使用此指南，可以将上面的代码修改为...

var cEditor = CodeMirror.fromTextArea(document.getElementById("c-code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/x-csrc",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
  });

$('#error').click(
  function () {
  var lines = cEditor.getValue().split('\n');
  for (var i = 0; i < lines.length; i++) {
    if (0 < lines[i].indexOf("flag")) {
      cEditor.getDoc().markText({line:i,ch:0},{line:i,ch:lines[i].length},{css: "background-color: yellow"});
    }
  }
});

...现在带有 flag 一词的行将具有黄色背景。