原生js--搜索输入框匹配文字高亮

/**
   * 搜索出的列表中文字的颜色高亮
   * @param prope 需要高亮的属性
  */
  highLightText = (prope) => {
    // searchval是搜索的关键字，list是原始的数据
    const {searchval,list} = this.state
    // 最终输出的数据
    let matchVal = [];
    list.forEach((item, index) => {
      let isMatch = true, // 是否匹配
          rawVal = item[prope] // 进行匹配的原始字符串
          matchVal[index] = [] // 初始化数据
      while (isMatch) {
        // 对关键字的位置进行匹配
        let pos = rawVal.indexOf(searchval)
        if (pos === -1) { // 没有匹配到关键字
          isMatch = false
          matchVal[index].push({ [prope]: rawVal.substring(0, rawVal.length),name: item.name })
        } else {
          // 当前匹配的位置+关键字的长度
          let matchEnd = pos + searchval.length
          // 没有匹配到的关键字
          matchVal[index].push({ [prope]: rawVal.substring(0, pos),name: item.name })
          // 匹配到的关键字
          matchVal[index].push({ [prope]: rawVal.substring(pos, matchEnd), matched: true,name: item.name })
          // 将匹配到的文字进行删除，将原始数据进行重新筛选
          rawVal = rawVal.substring(matchEnd, rawVal.length)
          // 当匹配的长度到了末尾，将不再进行匹配
          if (!rawVal && rawVal.length < 1) {
            isMatch = false
          }
        }
	  }
	})
    return matchVal
  }

// react中的render中的代码：
render() {
    const {list, operaList, isShowContent,loading} = this.state
    return (
      <div className="box">
        operaList.map((item,index) => {
          return(
            <div key={list[index].id} onClick={() => this.handleClick(list[index].id)}>
              <span>{list[index].name}</span>
              {
                item.map((subItem,subIndex) => {
                  return (
                    <span key={index + subIndex} style={{color: subItem.matched ? '#9b7235' : '#666'}}>
                      {subItem.id}
                    </span>
                  )
                })
              }
            </div>
          )
        })
      }
      </div>
    )
  }