需求:
将随机字符串(用户手动输入的),例如 "#好的话的哈哈 #哈哈哈,和大河 #很多哈哈的&#开导开导可#好的话的哈哈呵呵呵 #可控####123"
检索出以 "#"
开头,以 "~@#¥$%&×-=+·_+~*÷ ,。、;!‘’【】、《》?:“”「」|()……—— ,./;'[] \\ <>?:\"{}|!()…— "
结尾的标签,以标签形式展示在后台;
let allStr = "#好的话的哈哈 #哈哈哈,和大河 #很多哈哈的&#开导开导可#好的话的哈哈呵呵呵 #可控####123";
function searchTags(allStr) {
let startStr = "#"; //以#开头
let endStr = "~@#¥$%&×-=+·_+~*÷ ,。、;!‘’【】、《》?:“”「」|()……—— ,./;'[] \\ <>?:\"{}|!()…— "; //以特殊符号结尾
let start = 0; //开始的下标
let end = 0; //结束的下标
let isStart = false; //是否可以截取
let subStr = []; //最终保存的数组
for (i = 0; i < allStr.length; i++) {
//默认不是开始,从第一个下标开始走
if (!isStart) {
//如果下标为i的字符是#
if (allStr[i] == startStr) {
//则让开始下标为i,则给状态可以截取
start = i;
isStart = true;
}
} else {
//如果已经是可以截取状态,则查找特殊字符
if (endStr.indexOf(allStr[i]) > -1) {
//如果查到特殊字符将下标赋值给end
end = i;
//截取状态关闭
isStart = false;
//只有开始和结束中间有字符才截取
if (end - start > 1) {
subStr.push({
start,
length: end - start,
subStr: allStr.slice(start, end + 1)
})
}
}
}
//如果这次的结束字符也是#,并且下标大于0
if (allStr[end] == startStr && end > 0) {
//则这次的下标就是下次可以截取的开始下标
start = end;
isStart = true;
}
}
//如果循环结束还是可以截取状态,证明有开始没结尾,最后有一个正确的标签,则单独处理
if (isStart) {
//截取最后所有的字符
let strSubEnd = allStr.substring(start);
//如果字符大于0则push进数组
if (strSubEnd.length > 0) {
subStr.push({
start,
length: allStr.length - start,
subStr: allStr.slice(start)
})
}
}
return subStr;
}
let subStr = searchTags(allStr);
结果如下:
[
{start: 0, length: 7, subStr: "#好的话的哈哈 "}
{start: 8, length: 4, subStr: "#哈哈哈,"}
{start: 17, length: 6, subStr: "#很多哈哈的&"}
{start: 24, length: 6, subStr: "#开导开导可#"}
{start: 30, length: 10, subStr: "#好的话的哈哈呵呵呵 "}
{start: 41, length: 3, subStr: "#可控#"}
{start: 47, length: 4, subStr: "#123"}
]
拿到这样的结果可以显示和抖音类似将话题改变颜色,如果单独显示标签的话,在截取的时候就可以去头去尾的截取