前端截取字符串详解

一、前端截取字符串的方法

在前端开发中，字符串的操作非常常见，其中截取字符串操作也是必不可少的操作之一。在JavaScript中，有多种方法可以用于截取字符串，比如使用substring、substr等方法。

// 使用substring方法截取字符串
let str = "Hello World";
let result = str.substring(0, 5); // 截取从0开始，长度为5的字符串
console.log(result);
// 输出："Hello"

除了使用JavaScript内置的方法，还可以借助第三方库（如Lodash），以便更加方便地操作字符串。

二、前端截取字符串省略富文本

在前端开发中，为了更好地展示长文本，常常需要对长文本进行截取并添加省略号。如果是普通文本，可以直接使用substr等方法进行截取，但如果是富文本呢？此时可以借助一些第三方库（如HTML-ellipsis）进行操作。

// 使用HTML-ellipsis库实现省略富文本
import ellipsis from "html-ellipsis";
let element = document.getElementById("content"); // 获取DOM元素
ellipsis(element, { maxLine: 2, ellipsis: "..." }); // 显示两行，超出部分显示...

通过上述代码，我们可以将DOM元素中的富文本进行截取，最多显示两行，并在超出的部分显示…

三、前端截取字符串最后一位

在前端开发中，有时候需要获取字符串的最后一位字符，此时可以使用JavaScript内置的方法charAt。

// 使用charAt方法获取字符串的最后一位字符
let str = "Hello World";
let lastChar = str.charAt(str.length - 1); // 获取字符串的最后一位字符
console.log(lastChar);
// 输出："d"

四、前端截取字符串前面的数字

在前端开发中，有时需要从字符串中提取出前面的数字，此时可以借助正则表达式进行匹配。

// 使用正则表达式匹配提取前面的数字
let str = "123Hello World";
let result = str.match(/^\d+/); // 匹配以数字开头的字符串
console.log(result[0]);
// 输出："123"

五、前端截取字符串的函数

为了更好地复用截取字符串的代码，可以封装一个函数进行操作。

// 自定义一个截取字符串的函数
function subStr(str, start, length) {
  return str.substring(start, start + length);
}
let str = "Hello World";
let result = subStr(str, 0, 5); // 截取从0开始，长度为5的字符串
console.log(result);
// 输出："Hello"

六、前端截取字符串前两位

和截取字符串前面的数字一样，也可以使用正则表达式进行匹配来获取字符串前两位。

// 使用正则表达式匹配获取字符串前两位
let str = "Hello World";
let result = str.match(/^.{0,2}/); // 匹配字符串前两位
console.log(result[0]);
// 输出："He"

七、前端截取字符串前十位

和前面的一些操作类似，我们也可以使用substring等方法进行截取。

// 使用substring方法截取字符串前十位
let str = "Hello World";
let result = str.substring(0, 10); // 截取从0开始，长度为10的字符串
console.log(result);
// 输出："Hello Worl"

八、前端截取字符串最后一位的方式

除了第三个小标题中介绍的使用charAt方法获取最后一位字符外，还有一种方式是使用substring方法。

// 使用substring方法获取字符串最后一位
let str = "Hello World";
let lastChar = str.substring(str.length - 1); // 截取最后一位字符
console.log(lastChar);
// 输出："d"

九、前端截取字符串前18个字

同样可以使用substring等方法进行截取，只需要指定长度为18即可。

// 使用substring方法截取字符串前18个字
let str = "Hello World, Welcome to Frontend";
let result = str.substring(0, 18); // 截取前18个字
console.log(result);
// 输出："Hello World, Welco"

十、前端vue截取字符串的方法

在Vue中，可以通过过滤器(filter)来截取字符串。

// 定义一个截取字符串的过滤器

Vue.filter("subStr", function(str, start, length) {

return str.substring(start, start + length);

});

let app = new Vue({

el: "#app",

data: {

msg: "Hello World"

}

});

// 在HTML中使用截取过滤器

{{ msg | subStr(0, 5) }}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/292076.html