js高亮搜索词，且对超过超过指定文本超度的部分进行省略

在前端开发中，常常会遇到需要对搜索的关键词进行高亮的时候。有时候还会有文本区域长度有限，从而需要对内容进行省略的时候。也就是删除字符串中不包含html标签的字符。

一、首先高亮搜索词

const searchQuery = ref();

// 特殊字符转译
const escapeSpecialCharacter = (str: string) => {
    const pattern = /[`~!@#_$%^&*()=|{}':;',\\\[\\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？\s]/g;

    return str.replace(pattern, (match => '\\' + match));
}

const handleSearch = (val: any) => {

    if (!val) return '无';

    if (searchQuery.value) {

        let num = -1;
//适配特殊字符
            const regExp = new RegExp(escapeSpecialCharacter(searchQuery.value), 'ig');
//适配html标签
            const rHtml = new RegExp('\<.*?\>', 'ig');
            const sKey = `<span style="color: red;">${searchQuery.value}</span>`;
            // 获取文本中的标签列表
            const aHtml = val.match(rHtml);
// 替换掉标签转换为固定字符串
            val = val.replace(rHtml, '{~}');
// 关键词标红
            val = val.replace(regExp, sKey);
// 还原固定字符串为之前替换的标签
            val = val.replace(/{~}/g, () => {
                num++;
                return aHtml[num];
            });
<!-- 
// 将关键词拆分并对拆分的每个字符进行高亮
const searchArr = [...new Set(searchQuery.value.split(''))];
        searchArr.forEach((item) => {
            let num = -1;

            const regExp = new RegExp(escapeSpecialCharacter(item), 'ig');
            const rHtml = new RegExp('\<.*?\>', 'ig');
            const sKey = `<span style="color: red;">${item}</span>`;
            const aHtml = val.match(rHtml);
            val = val.replace(rHtml, '{~}');
            val = val.replace(regExp, sKey);
            val = val.replace(/{~}/g, () => {
                num++;
                return aHtml[num];
            });
        });
-->

        return val;
    } else {
        return val || '无';
    }
};

 二、省略（删除）掉超出的文本

步骤一中生成的字符串是包含着html标签的直接截取会出现问题

function customSubstr(startNumber: number, endNumber: number) {
    let str = this.toString();
    let rNum = -1
// 适配html标签
    const rHtml = new RegExp('\<.*?\>', 'ig');
// 获取存在的标签
    const aHtml = str.match(rHtml);
// 不存在则为普通字符，正常截取
    if (!aHtml){
        return str.substr(startNumber, endNumber)
    }
// 去除html标签
    let noHtml = str.replace(rHtml, '');
// 正常文本字符数小于等于截取长度时，返回本身
    if (noHtml.length <= endNumber){
        return str
    }
// 将标签替换为固定字符串
    str = str.replace(rHtml, '{~}');
// 文本倒序
    let temp = lodash.reverse(str.split(''))
    let result = [];
    let num = 0;
    let white = ['{','~','}']
    for (let i = 0; i < temp.length; i++) {
// 删除
<!-- 
let white = '{~}'
if(temp[i]+temp[i+1]+temp[i+2] == white){
result = result.concat(white.split(''))
i+=2
}
-->
        if(white.includes(temp[i])){
            result.push(temp[i])
        }else if(num < noHtml.length - endNumber) {
            num++;
        }else{
            result.push(temp[i])
        }
    }
// 结果翻转
    result = lodash.reverse(result);
    result = result.join('');
// 将固定字符串替换
    result = result.replace(/{~}/g, () => {
            rNum++;
                return aHtml[rNum];
            });
    return result;
    
}
// 因为上方是使用的function + this,所以使用的时候需要在string原型链上添加上这个函数
String.prototype.customSubstr = customSubstr;