JavaScript算法练习:使用JavaScript截断字符串

在Web中截断字符串的场景随处可见,CSS3未出现之前,截断字符串都是通过后端程序或者说JavaScript来处理。就现在的技术而言,使用CSS3的相关技术就可以实现截断字符串的效果。比如下图的效果:
JavaScript截断字符串

实际中截断字符串有单行和多行截断。在CSS3中实现方式方法各有不同:单行截断采用的是text-overflow属性,对于多行截断采用line-clamp属性,而且其必须结合Flexbox,如下:


@mixin boxClamp($v:1){
    overflow:hidden;
    -webkit-line-clamp: $v;
    line-clamp: $v;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    display:-webkit-box;
    display:box;
}

在Sass中完全可以定义一个Mixins来解决单行还是多行字符串截断:


@mixin ellipsis-overflow($line: 1, $substract: 0) {
    @if $line == 1 {
        white-space: nowrap;
        text-overflow: ellipsis;
    } @else {
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }
    width: 100% - $substract;
    overflow: hidden;
}

而今天这篇文章要说的是不是CSS或者说后端程序截断字符串方法,而是来说说如何使用JavaScript方法截断字符串。

问题起因
题目要求是创建一个truncateString(str,num)函数,函数中传入strnum两个参数,其中:
str是需要被截断的字符串
num是截断后有多少留的字符串数
在截断后的str字符串后添加一个省略符...

测试用例:

truncateString("A-tisket a-tasket A green and yellow basket", 11)返回A-tisket...
truncateString("Peter Piper picked a peck of pickled peppers", 14)返回Peter Piper...
truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)返回A-tisket a-tasket A green and yellow basket
truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)返回A-tisket a-tasket A green and yellow basket
truncateString("A-", 1)返回A...
truncateString("Absolutely Longer", 2)返回Ab...

解释
根据需求,需要写一个函数。如果字符串超过指定的指定长度,那么字符串将被截断,并且在截断的字符串后面添加...(默认的)或者指字的字符。如果字符串比指定长度小,字符串将不会被截断,保持原始状态。另外有两点得注意:
返回字符串最大长度应该包括这三个点...或指定的字符串
因为这三个点...或指定的字符串是额外附加上来的,所以我们应该尝试解决末尾空字符串的问题。比如结果应该是这样,使用This is a truncated string...替代This is a truncated string ...

那么在JavaScript中主要有三个字符串提取的方法:

  1. String.slice(begin[,end])
  2. String.substring(from[,to])
  3. String.substr(star[,length])

另外有一点,刚才也提到过,需要删除末尾的空格符,那么可以通过trim()方法来删除字符串开始处和结尾处的空格符。有关于这方面更多的介绍,可以点击这里阅读

方案
根据前面介绍的,创建一个truncateString(str,num)函数,函数中传入strnum


function truncateString (str, num) {
    // 你需要做的事情...
}

truncateString()函数中要做的几件事情,简单说一下:

  • 声明一个变量truncd,并且给其赋个空值(var truncd = '')
  • 如果字符串长度(str.length)小于或等于指定的长度(num),直接返回字符串原始状态(truncd = str)
  • 如果字符串长度(str.length)大于指定的长度(num),字符串将会截取,并且截取后的字符串长度为num - 3,因为其末尾需要添加指定的...字符串,而这个字符串长度为3(如果指定的不是...而是其它符号,那么其值将做相应改变)
  • 如果指定的长度num小于截取后字符串尾部添加的字符串长度,那么截取后的字符串将为num

使用JavaScript截断字符串

关系理清楚了,将相关代码添加到指定的函数中:


function truncateString (str, num) {
    var truncd = '';
    if (str.length <= num) {
        truncd = str;
    } else if (num <= 3) {
        truncd = str.slice(0, num).trim() + '...';
    } else {
        truncd = str.slice(0, num - 3).trim() + '...';
    }
    return truncd;
}

运行文章开头提供的测试用例,最终结果如下图所示
使用JavaScript截断字符串

提取字符串除了slice()方法之外,还有substring()substr()方法,也就是说,可以使用substring()substr()可以替代上面函数中的slice()。感兴趣的同学可以尝试一下。
提取字符串

也可以将上面的函数做对应的修改:


function truncateString(str, num) {
    return str.length <= num ? str : num <= 3 ? str.slice(0, num).trim() + '...' : str.slice(0, num - 3).trim() + '...';
}

上面函数指定的特殊符号是...,但如果我们需要指定其他特殊符号,比如~时,上面的函数是略有欠缺的,不过可以在上面的函数上稍作修改:


function truncateString (str, num, endChar) {
    var truncd = '';
    if (str.length <= num) {
        truncd = str;
    } else if (num <= endChar.length) {
        truncd = str.slice(0, num).trim() + endChar;
    } else {
        truncd = str.slice(0, num - endChar.length).trim() + endChar;
    }
    return truncd;
}

测试结果如下:
截取字符串

上面的方法截取的字符串,但有时候,希望截取的时候是按单词数来操作,那么上面的函数就无效了。其实要实现,同样是有方法可解的,比如:


function truncateString (str, num) {
    var words = str.split(' ');
    if (words.length <= num) {
        return words.splice(0, num).join(' ');
    } else {
        return words.splice(0, num).join(' ') + '...'
    }
}

不过上面的方法对于汉字不适用,如下面测试结果:
JavaScript来截取汉字

我也没找到如何通过JavaScript来截取汉字的方法,如果有的话,希望能多指点。

总结
上面介绍了如何通过JavaScript中的slice()substr()substring()方法提取字符串,并且一些方法对一个字符串按照指定的字符串数量做截取,并且在截取后的字符串末尾添加指定的字符。

转载:http://www.w3cplus.com/javascript/truncate-a-string-with-javascript.html

相关资料:

CSS3 Text-overflow
单行文字截断css省略号解决方案

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/340.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部