Question

我有由C代码组成的textarea。我想根据几个关键字突出显示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的行将具有黄色背景。

突出显示Codemirror文本区域内的错误行

1 个答案: