codemirror: поиск и выделение нескольких слов без диалога - PullRequest
Новая
       11

codemirror: поиск и выделение нескольких слов без диалога

0 голосов
/ 02 марта 2019

Цель: Я использую codemirror в качестве редактора.Я хочу

  1. Поиск и выделение нескольких строк
  2. Я хочу иметь возможность повторять каждое найденное совпадение и печатать его номер строки.
  3. Я хочуделайте это программно и не хотите использовать диалоговое окно, как в примере https://codemirror.net/demo/search.html

Проблема:

  1. в течение цикла, когда выбрано только последнее совпадениепредыдущие очищены, но я также хочу, чтобы он был выделен желтым цветом, например https://codemirror.net/demo/search.html

JSFIDDLE: https://jsfiddle.net/bababalcksheep/p7xg1utn/30/

КОД: 

$(document).ready(function() {
  //
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: "text/html",
    lineNumbers: true,
  });
  //
  function search(val) {
    var cursor = editor.getSearchCursor(val);
    while (cursor.findNext()) {
      editor.setSelection(cursor.from(), cursor.to());
        console.log('found at line ', cursor.pos.from.line + 1);
    }
  }
  //
  $('#search').click(function(event) {
    event.preventDefault();
    search(/^alpha|^beta/);
  });

  //
});

1 Ответ

0 голосов
/ 02 марта 2019

Вызов setSelection может выделить только одну непрерывную подстроку за раз.Вместо этого вы можете использовать для этого метод markText , передав cursor.from() и cursor.to(), чтобы получить места, которые вы хотите выделить: 

$(document).ready(function() {
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: "text/html",
    lineNumbers: true,
  });
  function search(val) {
    var cursor = editor.getSearchCursor(val);
    while (cursor.findNext()) {
        editor.markText(
          cursor.from(),
          cursor.to(),
          { className: 'highlight' }
        );
    }
  }
  //
  $('#search').click(function(event) {
    event.preventDefault();
    search(/^alpha|^beta/);
  });
});
.CodeMirror {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  height: 200px;
}
.highlight {
  color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/addon/search/searchcursor.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/codemirror.min.css">

<div class="container">
  <p><strong>Objective:</strong></p>
  <p>Find/search and highlight both words <strong>alpha</strong> and <strong>beta</strong> in codemirror editor</p>
  <button id="search" type="button" class="btn btn-primary">Search and highlight</button>
  <br><br>
  <textarea id="code" name="code" rows="8">Text line
alpha 1
Text line
Text line
alpha 2
Text line
Text line
beta 1
Text line</textarea>
...