支持任意 JavaScript 环境或框架
截取字符
subBefore
截取指定字符前面的值
查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { subBefore } from "@pureadmin/utils";
let character1 = ref("");
</script>
<template>
<naive-theme>
<n-space className="flex items-center mt-2">
<n-button @click="character1 = subBefore('hello,gird', ',')">
截取指定字符前面的值
</n-button>
<n-gradient-text type="info"> 原字符：hello,gird </n-gradient-text>
<n-gradient-text type="error" v-show="String(character1).length > 0">
截取后字符：{{ character1 }}
</n-gradient-text>
</n-space>
</naive-theme>
</template>
接收两个参数，第一个参数 val ，第二个参数 character ，返回值类型 string
| 参数属性 | 说明 | 类型 |
|---|---|---|
val | 要截取的值 | string |
character | 指定字符 | string |
subAfter
截取指定字符后面的值
查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { subAfter } from "@pureadmin/utils";
let character2 = ref("");
</script>
<template>
<naive-theme>
<n-space className="flex items-center mt-2">
<n-button @click="character2 = subAfter('hello,gird', ',')">
截取指定字符后面的值
</n-button>
<n-gradient-text type="info"> 原字符：hello,gird </n-gradient-text>
<n-gradient-text type="error" v-show="String(character2).length > 0">
截取后字符：{{ character2 }}
</n-gradient-text>
</n-space>
</naive-theme>
</template>
接收两个参数，第一个参数 val ，第二个参数 character ，返回值类型 string
| 参数属性 | 说明 | 类型 |
|---|---|---|
val | 要截取的值 | string |
character | 指定字符 | string |
subBothSides
截取指定字符两边的值
查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { subBothSides } from "@pureadmin/utils";
let character3 = ref();
</script>
<template>
<naive-theme>
<n-space className="flex items-center mt-2">
<n-button @click="character3 = subBothSides('hello,gird', ',')">
截取指定字符两边的值
</n-button>
<n-gradient-text type="info"> 原字符：hello,gird </n-gradient-text>
<n-gradient-text type="error" v-show="character3?.length > 0">
截取后字符：{{ character3 }}
</n-gradient-text>
</n-space>
</naive-theme>
</template>
接收两个参数，第一个参数 val ，第二个参数 character ，返回截取后的值，数组格式，左边返回指定字符前面的值，后边返回指定字符后面的值，返回值类型 Array<string>
| 参数属性 | 说明 | 类型 |
|---|---|---|
val | 要截取的值 | string |
character | 指定字符 | string |
subBetween
截取指定两个字符之间的值
查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { subBetween } from "@pureadmin/utils";
let character4 = ref("");
</script>
<template>
<naive-theme>
<n-space className="flex items-center mt-2">
<n-button @click="character4 = subBetween('i love you', 'i ', ' you')">
截取指定两个字符之间的值
</n-button>
<n-gradient-text type="info"> 原字符：i love you </n-gradient-text>
<n-gradient-text type="error" v-show="character4?.length > 0">
截取后字符：{{ character4 }}
</n-gradient-text>
</n-space>
</naive-theme>
</template>
接收两个参数，第一个参数 val ，第二个参数 before ，第三个参数 after，返回值类型 string
| 参数属性 | 说明 | 类型 |
|---|---|---|
val | 要截取的值 | string |
before | 前一个指定字符 | string |
after | 后一个指定字符 | string |
subTextAddEllipsis
截取字符并追加省略号（常用场景：echarts）
查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { subTextAddEllipsis } from "@pureadmin/utils";
let character5 = ref("");
</script>
<template>
<naive-theme>
<n-space className="flex items-center mt-2">
<n-button @click="character5 = subTextAddEllipsis('hello,gird', 5)">
截取字符并追加省略号（常用场景：echarts）
</n-button>
<n-gradient-text type="info"> 原字符：hello,gird </n-gradient-text>
<n-gradient-text type="error" v-show="character5?.length > 0">
截取后字符：{{ character5 }}
</n-gradient-text>
</n-space>
</naive-theme>
</template>
接收两个参数，第一个参数 val ，第二个参数 len ，返回值类型 string
| 参数属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
val | 要截取的值 | string | |
len | 要保留的位数 | string/number | 3 |
splitNum
将数字拆分为单个数字组成的数组
查看代码
vue
<script setup lang="ts">
import { ref } from "vue";
import { splitNum } from "@pureadmin/utils";
let character6 = ref();
</script>
<template>
<naive-theme>
<n-space className="flex items-center mt-2">
<n-button @click="character6 = splitNum(123456)">
将数字拆分为单个数字组成的数组
</n-button>
<n-gradient-text type="info"> 原数字：123456 </n-gradient-text>
<n-gradient-text type="error" v-show="character6?.length > 0">
拆分后的数字：{{ character6 }}
</n-gradient-text>
</n-space>
</naive-theme>
</template>
接收一个参数 number ，返回拆分的单个数字集合，返回值类型 Array<number> | string
| 参数属性 | 说明 | 类型 |
|---|---|---|
number | 要拆分的数字 | number |
hideTextAtIndex
使用指定符号对指定的文字进行隐藏，默认使用 * 符号
查看代码
vue
<script setup lang="ts">
import { hideTextAtIndex } from "@pureadmin/utils";
const name = "张小明";
const oname = "王小六";
const phone = "18212349876";
const idNum = "411543123498764567";
const word = "hello world";
</script>
<template>
<naive-theme>
<n-space className="flex items-center mt-2">
<n-gradient-text type="info"> 姓名：{{ oname }} </n-gradient-text>
<n-gradient-text type="error">
隐藏后的姓名：{{ hideTextAtIndex(oname, 1) }}
</n-gradient-text>
</n-space>
<n-space className="flex items-center mt-2">
<n-gradient-text type="info"> 姓名：{{ name }} </n-gradient-text>
<n-gradient-text type="error">
隐藏后的姓名：{{ hideTextAtIndex(name, [1, 2]) }}
</n-gradient-text>
</n-space>
<n-space className="flex items-center">
<n-gradient-text type="info"> 手机号：{{ phone }} </n-gradient-text>
<n-gradient-text type="error">
隐藏后的手机号：{{ hideTextAtIndex(phone, { start: 3, end: 6 }) }}
</n-gradient-text>
</n-space>
<n-space className="flex items-center mt-2">
<n-gradient-text type="info"> 身份证号：{{ idNum }} </n-gradient-text>
<n-gradient-text type="error">
隐藏后的身份证号：{{
hideTextAtIndex(idNum, [
{ start: 3, end: 6 },
{ start: 10, end: 13 }
])
}}
</n-gradient-text>
</n-space>
<n-space className="flex items-center mt-2">
<n-gradient-text type="info"> 使用指定符号：{{ word }} </n-gradient-text>
<n-gradient-text type="error">
使用指定符号隐藏后的值：{{ hideTextAtIndex(word, 5, "&") }}
</n-gradient-text>
</n-space>
</naive-theme>
</template>
接收三个参数，第一个参数 text ，第二个参数 index ，第三个参数 symbol ，返回值类型 string
| 参数属性 | 说明 | 类型 |
|---|---|---|
text | 文字 | string/number |
index | 指定的文字索引或索引区间 | number/Array<number|unknown>/HideTextIndex/Array<HideTextIndex> |
symbol | 指定的符号，默认 * | string |
ts
export interface HideTextIndex {
/** 文字隐藏的开始位置 */
start: number;
/** 文字隐藏的结束位置 */
end: number;
}