/
search.html
106 lines (94 loc) · 3.82 KB
/
search.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html>
<head>
<title>CodeMirror 2: Search/Replace Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../mode/xml/xml.css">
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../css/docs.css">
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.searched {background: yellow;}
</style>
</head>
<body>
<h1>CodeMirror 2: Search/Replace Demo</h1>
<form><textarea id="code" name="code">
<dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
<dd>Whether, when indenting, the first N*8 spaces should be
replaced by N tabs. Default is false.</dd>
<dt id="option_tabMode"><code>tabMode (string)</code></dt>
<dd>Determines what happens when the user presses the tab key.
Must be one of the following:
<dl>
<dt><code>"classic" (the default)</code></dt>
<dd>When nothing is selected, insert a tab. Otherwise,
behave like the <code>"shift"</code> mode. (When shift is
held, this behaves like the <code>"indent"</code> mode.)</dd>
<dt><code>"shift"</code></dt>
<dd>Indent all selected lines by
one <a href="#option_indentUnit"><code>indentUnit</code></a>.
If shift was held while pressing tab, un-indent all selected
lines one unit.</dd>
<dt><code>"indent"</code></dt>
<dd>Indent the line the 'correctly', based on its syntactic
context. Only works if the
mode <a href="#indent">supports</a> it.</dd>
<dt><code>"default"</code></dt>
<dd>Do not capture tab presses, let the browser apply its
default behaviour (which usually means it skips to the next
control).</dd>
</dl></dd>
<dt id="option_enterMode"><code>enterMode (string)</code></dt>
<dd>Determines whether and how new lines are indented when the
enter key is pressed. The following modes are supported:
<dl>
<dt><code>"indent" (the default)</code></dt>
<dd>Use the mode's indentation rules to give the new line
the correct indentation.</dd>
<dt><code>"keep"</code></dt>
<dd>Indent the line the same as the previous line.</dd>
<dt><code>"flat"</code></dt>
<dd>Do not indent the new line.</dd>
</dl></dd>
</textarea></form>
<button type=button onclick="search()">Search</button>
<input type=text style="width: 5em" id=query value=indent> or
<button type=button onclick="replace()">replace</button> it by
<input type=text style="width: 5em" id=replace>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", lineNumbers: true});
var lastPos = null, lastQuery = null, marked = [];
function unmark() {
for (var i = 0; i < marked.length; ++i) marked[i]();
marked.length = 0;
}
function search() {
unmark();
var text = document.getElementById("query").value;
if (!text) return;
for (var cursor = editor.getSearchCursor(text); cursor.findNext();)
marked.push(editor.markText(cursor.from(), cursor.to(), "searched"));
if (lastQuery != text) lastPos = null;
var cursor = editor.getSearchCursor(text, lastPos || editor.getCursor());
if (!cursor.findNext()) {
cursor = editor.getSearchCursor(text);
if (!cursor.findNext()) return;
}
editor.setSelection(cursor.from(), cursor.to());
lastQuery = text; lastPos = cursor.to();
}
function replace() {
unmark();
var text = document.getElementById("query").value,
replace = document.getElementById("replace").value;
if (!text) return;
for (var cursor = editor.getSearchCursor(text); cursor.findNext();)
editor.replaceRange(replace, cursor.from(), cursor.to());
}
</script>
<p>Demonstration of search/replace functionality and marking
text.</p>
</body>
</html>