2
0

search.html 3.8 KB

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