代码镜像。替换文本的简单方法?

问题描述 投票:0回答:2

我使用 CodeMirror(5.58.2) 来编辑文本。

new_cm = CodeMirror.fromTextArea(textarea_obj, param);

但是在文本区域中,我可以轻松替换文本,只需这样做

obj.value = obj.value.replace( /123/g, '3210');
我可以在 CodeMirror 中做些什么? 无需向用户提出任何接口请求。只是一个简单的“Make Replace”按钮和带有正则表达式模式的代码。

javascript codemirror
2个回答
2
投票

这是一个例子...

// start the editor instance  
const new_cm = CodeMirror.fromTextArea(textarea_obj, param);

// get the entire editor text from CodeMirror editor  
let text = new_cm.getValue();

// edit the text, for example  
text = text.replace(/abc/g, '');

// set the text back to the editor  
new_cm.setValue(text);

0
投票

我试过了,效果很好:

<!doctype html>
<html>
  <head>
    <title>CodeMirror</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
    <link rel="stylesheet" href="" id="modeFile">
    <link rel="stylesheet" href="colorpicker/addon/codemirror-colorpicker.css" />
    <link rel="stylesheet" href="colorpicker/addon/codemirror-colorpicker.css" />
    <script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
    <link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
    <script type="text/javascript" src="colorpicker/addon/codemirror-colorpicker.js"></script>
    <script type="text/javascript" src="colorpicker/addon/codemirror-colorpicker.js"></script>
    <script src="https://CodeMirror.net/lib/codemirror.js"></script>
    <script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
    <script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
    <script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
    <script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
    <script src="https://CodeMirror.net/mode/meta.js"></script>
    <script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
    <script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
    <script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
    <script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
    <script src="https://CodeMirror.net/mode/xml/xml.js"></script>
    <script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
    <script src="https://CodeMirror.net/mode/css/css.js"></script>
    <script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
    <script src="https://CodeMirror.net/addon/dialog/dialog.js"></script> 
    <script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
    <script src="https://CodeMirror.net/addon/search/search.js"></script>
    <script src="https://CodeMirror.net/addon/fold/xml-fold.js"></script>
    <script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script> 
    <script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
    <script src="https://CodeMirror.net/addon/runmode/runmode.js"></script>
    <script src=" https://CodeMirror.net/addon/runmode/colorize.js"></script>
  </head>
  <body>
    <div id="editor"></div>
    <button onclick="find()">find</button>
    <button onclick="replace()">replace</button>
    <button onclick="JTL()"Jump-To-Line</button>
    <button onclick="undo()">undo</button>
    <button onclick="redo()">redo</button>
    <script>
      function find() {
        
        editor.execCommand('find');
      }
      function undo() {
        
        editor.execCommand('undo');
      }
      function redo() {
        
        editor.execCommand('redo');
      }
      function Replace() {
        
        editor.execCommand('replace');
      }
      function JTL() {
        
        editor.execCommand('jumpToLine');
      }
    </script>
    <script>
      var editor = CodeMirror(document.getElementById('editor'),{
          mode: 'text/html',
          matchBrackets: true,
          lineNumbers: true,
        });
    </script>
  </body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.