当前位置:秋叶网络博客 前端设计 ◊ Javascript截取混合中英文为等宽内容

Javascript截取混合中英文为等宽内容

作者:秋叶 发表时间:2017年9月04日

在javasrip中:

"长度是都多少".length = 6  ;
"length".length = 6 ;

可以发现,“长度是都多少”和“length”的字数是一样的,但是长度却是中文长度明显大于英文长度,因为一个中文是两个字节,相当于两个英文。这是从字节上来看,如果从字形上来看,也差不多这个规律,因为部分英文占极短的宽度(简称变态)会导致不遵循这个规律而导致误差,但总比把英文当成中文来看好多了。

截取等宽内容有什么用呢,比如说很多网站都有网站摘要,如果什么都不处理直接substring截取,遇到中英文就会感觉有英文的总会短很多。下面这段函数就是解决这个问题的:

function filterText(html,count,keywords){
    var index = 0;
    var text = html.replace(/<\w+[^>]*>/gi,"").replace(/<\/(\w+)\s*[^>]*>/gi,"$1 ").replace(/\s+/gi," ");
    if(keywords && keywords.length){
        let reg = new RegExp(keywords.join("|"));
        let keyIndex = text.search(reg);
        let beginIndex = 0,endIndex = 0;
        if(keyIndex !== -1){
            let left_index = 0;
            for(let i = keyIndex; i > 0; i--){
                if(left_index >= count/2){
                    break;
                }
                if (text.charCodeAt(i) > 127 || text.charCodeAt(i) == 94) {
                    left_index += 2;
                } else {
                    left_index ++;
                }
                beginIndex = i;
            }
            let right_index = 0;
            for(let i = keyIndex, len = text.length; i < len; i++){
                 if(right_index >= count/2 + left_index){
                    break;
                }
                if (text.charCodeAt(i) > 127 || text.charCodeAt(i) == 94) {
                    right_index += 2;
                } else {
                    right_index ++;
                }
                endIndex = i;
            }
            return text.substring(beginIndex,endIndex).replace(new RegExp("("+keywords.join("|")+")","gi"),'$1');
        }else{
            return text;
        }
    }else if(count){
        for (var i=0, len = text.length; i < len; i++) {
             if(index > count+1){
                text = text.substring(0,i);
                break;
            }
            if (text.charCodeAt(i) > 127 || text.charCodeAt(i) == 94) {
                index += 2;
            } else {
                index ++;
            }
        }
    }
    return text;
};

使用:html参数是原始内容,count是截取字数(以汉字为准,两个英文算一个汉字),被你们发现了,除了截取字数功能,还有一个参数keywords用于搜索关键字的功能,它是匹配到关键字后截取关键字周围的文字返回出来,用于搜索情况下的摘要展示。

目录: 前端设计 | 标签: , | 3420次阅读