karthikrajannadurai/codemirrorsearch

CodeMirror Search

Enhanced CodeMirror search and replace

Usage

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/addon/mode/overlay.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/addon/scroll/simplescrollbars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/addon/search/searchcursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/addon/selection/mark-selection.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/addon/scroll/simplescrollbars.css">

<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>    
<script src="https://rawgit.com/kofifus/CodeMirrorSearch/master/cmsearch.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/kofifus/CodeMirrorSearch/master/cmsearch.css">
    
<style>
  .CodeMirror { border: 1px solid ; height: 400px; width: 400px; margin-left:30px; }
</style>
    
<textarea id="ta"></textarea>

<script>
  let ta=document.getElementById('ta');
  let cm = CodeMirror.fromTextArea(ta, { lineWrapping:true, scrollbarStyle:'simple', showCursorWhenSelecting:true, styleSelectedText:true });
  cm.setValue('some text');
  initCMsearch(cm);      
</script>

Key Bindings

Ctrl-F => show find widget
Ctrl-G / F3 => find next
Shift-Ctrl-G / Shift-F3 => find prev
Shift-Ctrl-F / Ctrl-H => show replace widget
ctrl+F3 / shift+ctrl+H => replace next
shift+ctrl+F3 => replace prev
Shift-Ctrl-R => replace all
Esc => hide widget & highlights

Features

• combo boxes search and replace
• find next / find prev / replace next / replace prev / replace all
• case sensitive / whole word / regular expression / in selection / wrap around / highlight / persistent dialog

Demo

http://plnkr.co/edit/LEEZf2Vt9U6PASRGpsrt?p=preview