javascript截取字符串的方法(Javascript截取字符串方法集合)

请用语音读文章

平时前端研究事件时。总是会需要对字符串进行截断。例如新闻标题。需要把超出可视地区后需要进行截断。如下图：

小编我由主要负责后端研究。最开始是选用后端方法来实现字符串截断。之后传递给前端人员使用。

但是这种方法有一个弊端。尤其是响应式的页面。截断偷取字数无法精确控制。例如pc端可视地区应该展现150个字符。但是手机app软件屏幕最多就只能展现20个字符。所以通过后端来控制字符数是超级烂的解决问题方案。最好的解决问题的办法是通过前端方法来截断字符串。下面分别用javascript和css的方法来实现。

先看一下html部分

<div class="title">

怎么要生产高端的网址？高端网址建设售价怎么越来越高？

</div>

下面分别针对这行html进行截断操作。

1、javascript方法。

先封装一个截断偷取字符串的方法。代码如下：

<script>

String.prototype.left = function (len) //左边截断偷取字段数

{

var str = this;

if (isNaN(len) || len == null) {

len = str.length;

}

else {

if (parseInt(len) < 0 || parseInt(len) > str.length) {

len = str.length;

}

}

return str.substr(0, len);

}

</script>

之后再页面中选用jQuery方法调用：

<script type="text/javascript">

$(function () {

var $title=(".title");

var txt= $title.html().left(50); //截断偷取前50个字符

$title.html(txt); //从头开始

});

</script>

这种方法应该实现字符串的截断偷取。但是这种方法也不理想。pc端和手机APP软件截断偷取字数还是需要单独根据浏览器类别来定义。

2、css控制。这种是最讲解的解决问题方案

定义一个css类：

.title {

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

text-overflow: ellipsis; 这句意思是超出可视地区后展现三个点…。如果只想截断。应该改为： text-overflow:clip。

今天先写到这里。如果感觉对您有帮助。应该转发一下。后面有时间再共享一下前端技术给各位。

以上就是由优质生活领域创作者 生活常识网 整理编辑的，如果觉得有帮助欢迎收藏转发~