使用正则表达式实现不区分大小写的高亮搜索

需求：

搜索框输入变化时，匹配符合的元素匹配部分高亮。

 

背景：

元素名称为<input>，可以重命名。

 

设计方案：

搜索状态时，通过正则匹配，将<input>组件通过DOM操作，替换成<span>分割的字符，通过<span>的class实现高亮样式；在重命名时，显示回原来的<input>组件。

 

主要方法：

主要为正则匹配替换的方法。

 <div class="element-name-wraper" v-show="searchText === '' || isRenameMode">
                                  <input type="text" class="element-name scene-name"
                                      ref="elementNameInput"
                                      v-model.trim="element.name"
                                      :disabled="!isRenameMode&