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

需求：

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

 

背景：

元素名称为<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"
                                      @blur="handleRenameEnter"
                                      @keyup.enter="handleRenameEnter"
                                      @keyup.esc="handleRenameCancel"
                                  >
</div>
<div class="element-name-wraper" ref="elementNameWraper" v-show="searchText !== '' && !isRenameMode">
</div>

    handleSearchMode: function(pattern) {
      if(pattern && pattern.length>0) {
        let name = this.element.name
        let reg = new RegExp(pattern, 'gi')
        name = name.replace(reg, match => {
          return '<span class="search-match">'+ match +'</span>'
        })
        this.$refs["elementNameWraper"].innerHTML = name
      }
    },

使用了String.replace的API，第一个参数为reg，'gi'保证了全局和大小写非敏感；第二个参数为function，参数为匹配结果。

 

其他：

一开始没有使用String.replace，而是使用了String.split(reg)。这样存在的问题在于，不能取得原字符串匹配相符的字段，替换时，只能使用pattern，这样会把原先的大写字符在高亮时显示成小写字符。