https://www.heibaiketang.com/blog/show/95.html#

http://lovelyelfpop.github.io/Sencha_Cmd6_Extjs6_Guides/extjs/6.0/components/forms.html

https://lezuse.github.io/rangy/demos/core.html

https://github.com/timdown/rangy

replace方法是javascript涉及到正则表达式中较为复杂的一个方法，严格上说应该是string对象的方法。只不过牵扯到正则的时候比较多一些。需要我们灵活的使用。

语法： stringObj.replace(regexp/substr,replacement)；

第一个参数：必需。字符串中要替换的子串或正则RexExp；
第二个参数：必需，一个字符串值，规定了替换文本或生成替换文本的函数。
返回值：注意它的返回值是一个新的字符串，并没有更改原有字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
所以根据它的参数的不同分为很多种情况，以下一一对各种情况加以分析：

NO.1 两个参数都是字符串

var str1 = '这是一段原始文本，需要替换的内容"这要替换"！';var newStr = str1.replace('这要替换','need replace');
console.log( newStr );    //输出：   这是一段原始文本，需要替换的内容"need replace"！

上面的例子中第二个参数字符串’need replace’,替换掉了第一个参数字符串’这要替换’。这是最简单的一种形式。

NO.2 第一个参数是正则，第二个参数是字符串

var str2 = '这是一段原始文本，需要替换的内容"ac这要替换bb"！';var newStr = str2.replace( /([a-z])+/g,'qqq' );console.log( newStr );    //输出：   这是一段原始文本，需要替换的内容"qqq这要替换qqq"！

上面的例子字符串’qqq’,替换了正则匹配的内容。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

NO.3 第一个参数是正则，第二个参数是带$符的字符串

var str3 = '这是一段原始文本,"3c这要替换4d"!';var newStr = str3.replace( /([0-9])([a-z])/g,"$1" );console.log( newStr );    //输出：    这是一段原始文本,"3这要替换4"!';

上面的例子，$1表示regexp中的第一个子表示即（[0-9]）匹配单个数字，同理若是$2则表示第二个子表示即（[a-z]）；所以，’3c’这个匹配到的整体被第一个子表示说表示的’3’替换，’4d’被第一个子表示匹配的数字’4’所替换。其他几个同理可得：

（/([0-9])([a-z])/g,”$2″）—>////输出： 这是一段原始文本,”c这要替换d”!'; (3c和4d被相应的第二个子表示匹配出来的c和d替换)
（/([0-9])([a-z])/g,”$'”）—>////输出： 这是一段原始文本,”这要替换d”!这要替换”!”!'; (3c被3c右侧文本替换，4d右侧是”!替换，所以出现俩次)

NO.4 第一个参数是正则，第二个参数函数

var str4 = '这是一段原始文本，需要替换的内容"aa这要bbb替换ccccc"！';var newStr = str4.replace( /[a-z]+/g,function ($0){    var str = '';    for (var i = 0; i < $0.length; i++) {
        str += '*';
    };    return str;
} );console.log( newStr );    //这是一段原始文本，需要替换的内容"这要替换"！

上面的例子函数的第一个参数为匹配的regexp的整体，根据长度函数返回值为相应替换的文本；

NO.5 第一个参数是正则且有子表达式，第二个参数函数且带有多个参数

var str5 = '这是一段原始文本，需要替换的内容"3c这要替换4d"！';var newStr = str5.replace( /([0-9])([a-z])/g,function (arg1,arg2,arg3,arg4,arg5){ console.log( arg1 );  console.log( arg2 );  console.log( arg3 );  console.log( arg4 );  console.log( arg5 );
} );//输出：3c3c17这是一段原始文本，需要替换的内容"3c这要替换4d"！4d4d23这是一段原始文本，需要替换的内容"3c这要替换4d"！

上面的例子第一个参数arg1表示匹配的整体，arg2表示第一个子表达式，arg3表示第二个子表达式，接下来的参数arg4是一个整数，声明了表示子匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

以上就是replace方法各种可能的情况。确实是一个需要深入理解的方法，不过确实也很强大的一个方法，值得深入研究！

ace.js

官方的github https://github.com/ajaxorg/ace
ace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器，该编辑器匹配并扩展现有本机编辑器（如 TextMate，VIM 或 Eclipse）的功能，可用性和性能。它可以轻松嵌入任何网页或 JavaScript 应用程序中。Ace 是 Cloud9 IDE 的主要编辑者，也是 Mozilla Skywriter（Bespin）项目的继承者。

特点

• 超过 120 种语言的语法突出显示（可导入 TextMate / Sublime / .tmlanguage 文件）

• 超过 20 个主题（可导入 TextMate / Sublime / .tmtheme 文件）

• 自动缩进和突出

• 可选的命令行

• 处理大量文件（最后检查，4,000,000 行是上限）

• 完全可定制的键绑定，包括 VIM 和 Emacs 模式

• 搜索并替换正则表达式

• 突出显示匹配的括号

• 在软标签和真实标签之间切换

• 显示隐藏的字符

• 使用鼠标拖放文本

• 换行

• 代码折叠

• 多个游标和选择

• 实时语法检查器（目前是 JavaScript / CoffeeScript / CSS / XQuery）

• 剪切，复制和粘贴功能

ace.js 编译文件下载

默认情况下，它是分开的2个库，经过查找，找了，不需要自己打包编译出来。
https://github.com/ajaxorg/ace-builds/
下载即可，有多种模式。

git clone https://github.com/ajaxorg/ace-builds.git

ace.js快速入门

初始化

• 定义 HTML

• 编写 JS

<div id="editor">some text</div><script src="src/ace.js" type="text/JavaScript" charset="utf-8"></script><script>
    var editor = ace.edit ("editor");// 这里不需要加 #</script>

这样是不能显示的，所有需要加个高度和宽度，例如

<br/>

#editor {
    width: 500px;
    height: 400px;}

主题

• 加入你的主题 JS

• 写入调用

<br/>

<script src="src/theme-twilight.js" type="text/JavaScript" charset="utf-8"></script><script>
   editor.setTheme ("ace/theme/twilight");</script>

输入模式

默认情况下，输入的是文本编辑器，如果你想要加入 JavaScript 编辑器，需要加入文件，并且设置模式

<br/>

<script src="src/mode-javascript.js" type="text/JavaScript" charset="utf-8"></script>

<br/>

<script>var JavaScriptMode = ace.require ("ace/mode/JavaScript").Mode;editor.session.setMode (new JavaScriptMode ());</script>

销毁

<br/>

editor.destroy ();editor.container.remove ();

自动提示语法

<br/>

editor.setOptions ({
    enableBasicAutocompletion: true,//
    enableSnippets: true,//
    enableLiveAutocompletion: true,// 补全});

监听内容实时输出

<br/>

editor.getSession().on ('change', function (e) {});

获得输入内容 editor.getValue ()

设置输入内容 editor.setValue (editorValue);

移动光标 editor.moveCursorTo (0, 0);// 移动光标至第 0 行，第 0 列

编辑内容搜索 editor.execCommand ('find');// 与 ctrl+f 功能一致

ace.js配置

创建并初始化 ace.edit(element, options);

<br/>

// pass options to ace.editace.edit("元素ID", {
    mode: "ace/mode/javascript",
    selectionStyle: "text"})

方法设置参数多个 editor.setOptions(options)

<br/>

var editor=ace.edit("元素ID");editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,//只能补全
    });

方法设置参数单个 editor.setOption(options)

取得单个配置 editor.getOption

<br/>

editor.getOption("optionName");

设置主题 editor.setThemee("主题")

<br/>

 editor.setTheme("ace/theme/monokai");//monokai

设置编辑器语言模式getSession().setMode(mode)

<br/>

   editor.getSession().setMode("ace/mode/html");//语言

支持以下

<br/>

|-- ambiance.css|-- ambiance.js|-- chaos.css|-- chaos.js|-- chrome.css|-- chrome.js|-- clouds.css|-- clouds.js|-- clouds_midnight.css|-- clouds_midnight.js|-- cobalt.css|-- cobalt.js|-- crimson_editor.css|-- crimson_editor.js|-- dawn.css|-- dawn.js|-- dracula.css|-- dracula.js|-- dreamweaver.css|-- dreamweaver.js|-- eclipse.css|-- eclipse.js|-- github.css|-- github.js|-- gob.css|-- gob.js|-- gruvbox.css|-- gruvbox.js|-- idle_fingers.css|-- idle_fingers.js|-- iplastic.css|-- iplastic.js|-- katzenmilch.css|-- katzenmilch.js|-- kr_theme.css|-- kr_theme.js|-- kuroir.css|-- kuroir.js|-- merbivore.css|-- merbivore.js|-- merbivore_soft.css|-- merbivore_soft.js|-- mono_industrial.css|-- mono_industrial.js|-- monokai.css|-- monokai.js|-- nord_dark.css|-- nord_dark.js|-- pastel_on_dark.css|-- pastel_on_dark.js|-- solarized_dark.css|-- solarized_dark.js|-- solarized_light.css|-- solarized_light.js|-- sqlserver.css|-- sqlserver.js|-- terminal.css|-- terminal.js|-- textmate.css|-- textmate.js|-- tomorrow.css|-- tomorrow.js|-- tomorrow_night.css|-- tomorrow_night.js|-- tomorrow_night_blue.css|-- tomorrow_night_blue.js|-- tomorrow_night_bright.css|-- tomorrow_night_bright.js|-- tomorrow_night_eighties.css|-- tomorrow_night_eighties.js|-- twilight.css|-- twilight.js|-- vibrant_ink.css|-- vibrant_ink.js|-- xcode.css
`-- xcode.js

取消语言模式的语法检查 editor.session.setUseWorker(false);

复制

 editor.session.setUseWorker(false);
 或
 editor.getSession().setUseWorker(false);

更改编辑器的大小

复制

editor.resize()

获取选定的文本：

复制

editor.getSelectedText(); // or for a specific rangeeditor.session.getTextRange(editor.getSelectionRange());

光标处输入信息

复制

editor.insert("Something cool");

替换范围内的文本

复制

editor.session.replace(new ace.Range(0, 0, 1, 1), "new text");

获取当前光标所在的行和列：

复制

editor.selection.getCursor();

转到一行：

复制

editor.gotoLine(lineNumber);

获取总行数：

复制

editor.session.getLength();

设置默认TAB大小：

复制

editor.session.setTabSize(4);

设置字体大小：

复制

document.getElementById('editor').style.fontSize='12px';

切换自动换行：

复制

editor.session.setUseWrapMode(true);

设置行高亮显示：

复制

editor.setHighlightActiveLine(false);

设置打印边距可见性：

复制

editor.setShowPrintMargin(false);

将编辑器设置为只读：

复制

editor.setReadOnly(true);  // false to make it editable

查找

复制

editor.find('needle',{
    backwards: false,
    wrap: false,
    caseSensitive: false,
    wholeWord: false,
    regExp: false});editor.findNext();editor.findPrevious();

您可以使用以下选项作为搜索参数：

• needle：您要查找的字符串或正则表达式

• backwards：是否从光标当前位置向后搜索。默认为false。

• wrap：搜索到末尾时是否将搜索回头。默认为false。

• caseSensitive：搜索是否应该区分大小写。默认为false。

• wholeWord：搜索是否仅匹配整个单词。默认为false。

• range：该 [范围] 内搜索。将 null 整个文档设置为

• regExp：搜索是否为正则表达式。默认为false。

• start：开始搜索的起始 [范围] 或光标位置

• skipCurrent：是否在搜索中包括当前行。默认为false。

• preventScroll：是否将光标移动到下一个匹配项。默认为false。

这是执行替换的方法：

复制

editor.find('foo');editor.replace('bar');

这是全部替换：

复制

editor.replaceAll('bar');

（editor.replaceAll使用较早设置的针头editor.find('needle', ...）

ace.js 监听事件

onchange 内容变化监听

复制

editor.session.on('change', function(delta) {
    // delta.start, delta.end, delta.lines, delta.action});

监听 selection

复制

editor.session.selection.on('changeSelection', function(e) {});

监听光标：

复制

editor.session.selection.on('changeCursor', function(e) {});

添加新命令和快捷键

复制

editor.commands.addCommand({
    name: 'myCommand',//命令名称
    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},//快捷键
    exec: function(editor) {
        //执行的代码
    },
    readOnly: true // false 只读模式});

配置模式和主题的动态加载

复制

ace.config.set("basePath", "https://url.to.a/folder/that/contains-ace-modes";);

一个模块的路径可以单独配置：

复制

ace.config.setModuleUrl("ace/theme/textmate", "url for textmate.js");

将ace与webpack一起使用时，可以使用以下命令配置所有子模块的路径

复制

require("ace-builds/webpack-resolver");

ace 英文wiki

https://github.com/ajaxorg/ace/wiki

ace.js在线演示实例

• ace.js的HTML代码演示

• 在线工具，工具里面全是 ace.js 完成的，点击进入在线工具

<br/>