vue 搜索结果匹配关键字高亮

一、效果图

搜索结果匹配关键字高亮.gif

二、代码实现

<input ref="searchInput" v-model="inputVal" type="text" placeholder="搜索目的地" />

第一种写法：搜索不区分大小写,使用slice()切分字符串推荐使用:

<a class="text">
              <span>{{item.name.slice(0,item.name.toLowerCase().indexOf(inputVal.toLowerCase()))}}</span><span
              style="color:#2A70FE">{{item.name.slice(item.name.toLowerCase().indexOf(inputVal.toLowerCase()),item.name.toLowerCase().indexOf(inputVal.toLowerCase())+inputVal.length)}}</span><span>{{item.name.substr(item.name.toLowerCase().indexOf(inputVal.toLowerCase())+inputVal.length)}}</span>
            </a>

第二种写法：搜索不区分大小，使用substr()切分字符串不推荐使用（因为ECMAscript没有对substr方法进行标准化）:

<a class="text">
    <span>{{item.name.substr(0,item.name.toLowerCase().indexOf(inputVal.toLowerCase()))}}</span><span
              style="color:#2A70FE">{{item.name.substr(item.name.toLowerCase().indexOf(inputVal.toLowerCase()),inputVal.length)}}</span><span>{{item.name.substr(item.name.toLowerCase().indexOf(inputVal.toLowerCase())+inputVal.length)}}</span>
 </a>

第三种写法：搜索区分大小写的写法最好把substr再优化为slice切分:

<input ref="searchInput" v-model="inputVal" type="text" placeholder="搜索目的地" />

<a class="text">
    <span>{{item.name.substr(0,item.name.indexOf(inputVal))}}</span><span style="color:#2A70FE">{{inputVal}}</span><span>{{item.name.substr(item.name.indexOf(inputVal)+inputVal.length)}}</span>
</a>

三、相关知识：

1、indexOf兼容，可以用以下代码兼容，也可以使用polyfill

let Util = {};
/**
 * 判断浏览器是否支持indexOf ，indexOf 为ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持
 */
Util.support_indexOf = function () {
  if (!Array.prototype.indexOf) {
    // 新增indexOf方法
    Array.prototype.indexOf = function (item) {
      let result = -1;
      let a_item = null;
      if (this.length == 0) {
        return result;
      }
      for (var i = 0, len = this.length; i < len; i++) {
        a_item = this[i];
        if (a_item === item) {
          result = i;
          break;
        }
      }
      return result;
    }
  }
}
Util.support_indexOf();

2、slice() 方法

定义和用法

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法

stringObject.slice(start,end)

返回值

一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。

3、 substr() 方法不推荐使用

定义和用法

substr()方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法

stringObject.substr(start,length)

注：ECMAscript 没有对该方法进行标准化，因此反对使用它。