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

作者：秋了秋发表时间：2017年09月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用于搜索关键字的功能，它是匹配到关键字后截取关键字周围的文字返回出来，用于搜索情况下的摘要展示。

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/491.html

目录: 前端编程标签: 截取字符串,javascript 22484次阅读