客观的：我在用代码镜像作为编辑。我想要
- 搜索并突出显示多个字符串
- 我希望能够迭代找到的每个匹配项并打印其行号。
- 我想以编程方式执行此操作，并且不想使用对话框，如示例所示https://codemirror.net/demo/search.html
Issue:
- 在 while 循环期间，仅选择最后一场比赛，之前的比赛被清除，但我也希望它突出显示为黄色https://codemirror.net/demo/search.html
JSFIDDLE： https://jsfiddle.net/bababalcksheep/p7xg1utn/30/
CODE:
$(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/);
});
//
});
Calling setSelection一次只能突出显示一个连续的子字符串。相反，您可以使用markText方法，传入cursor.from() and 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
