buzzts

Appearance

支持任意 JavaScript 环境或框架

处理字符串工具集

capitalizeFirstLetter ​

将字符串首字母大写

​

首字母大写转换
请输入字符串后点击转换
查看代码
vue
<script setup lang="ts">
import { ref, computed } from "vue";
import { capitalizeFirstLetter, randInt, randString, RandType } from "buzzts";

const input = ref<string>(randString(randInt(8, 18), RandType.LOWERCASE | RandType.NUMBER));
const result = ref<string>("");

function manualConvert() {
  // 直接转换当前输入框内容
  result.value = capitalizeFirstLetter(input.value);
}

function randomConvert() {
  // 先随机生成字符串赋值给输入框
  input.value = randString(randInt(8, 18), RandType.LOWERCASE | RandType.NUMBER);
  // 再转换
  result.value = capitalizeFirstLetter(input.value);
}

const resultText = computed(() => {
  if (!result.value) return "请输入字符串后点击转换";
  return `capitalizeFirstLetter() = ${result.value}`;
});
</script>

<template>
  <n-card title="首字母大写转换">
    <n-space vertical>
      <n-input v-model:value="input" label="输入字符串" />

      <n-space>
        <n-button type="info" @click="randomConvert">随机转换</n-button>
        <n-button type="primary" @click="manualConvert">手动转换</n-button>
      </n-space>

      <n-gradient-text type="info">{{ resultText }}</n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
input输入字符串string无
返回值说明
string首字母大写的字符串

​

  • 将字符串首字母转换成大写
  • 非字符串或空字符串原样返回

camelToSnake ​

驼峰命名转蛇形命名

​

驼峰转蛇形命名
请输入驼峰命名字符串后点击转换
查看代码
vue
<script setup lang="ts">
import { ref, computed } from "vue";
import { camelToSnake, randInt, randString, RandType } from "buzzts";

const input = ref<string>(randString(randInt(8, 18), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER));
const keepUnderscorePrefix = ref<boolean>(false);
const result = ref<string>("");

function generateSnake() {
  result.value = camelToSnake(input.value, { keepUnderscorePrefix: keepUnderscorePrefix.value });
}

// 新增随机转换函数
function randomConvert() {
  input.value = randString(randInt(8, 18), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER);
  generateSnake();
}

const resultText = computed(() => {
  if (!result.value) return "请输入驼峰命名字符串后点击转换";
  return `camelToSnake() = ${result.value}`;
});
</script>

<template>
  <n-card title="驼峰转蛇形命名">
    <n-space vertical>
      <n-input v-model:value="input" label="驼峰命名字符串" />

      <n-checkbox-group v-model:value="keepUnderscorePrefix" multiple={false}>
        <n-checkbox :value="true">保留前导下划线</n-checkbox>
      </n-checkbox-group>

      <n-space>
        <n-button type="info" @click="randomConvert">随机转换</n-button>
        <n-button type="primary" @click="generateSnake">转换</n-button>
      </n-space>

      <n-gradient-text type="info">{{ resultText }}</n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
camelCaseStr驼峰命名字符串string无
options配置选项object{}
options.keepUnderscorePrefix是否保留前导下划线booleanfalse
返回值说明
string蛇形命名字符串

​

  • 将驼峰命名字符串转换为蛇形命名
  • 支持保留前导下划线（默认不保留）
  • 处理连续大写字母情况

snakeToCamel ​

蛇形命名转驼峰命名

​

蛇形转驼峰命名
请输入蛇形命名字符串后点击转换
查看代码
vue
<script setup lang="ts">
import { ref, computed } from "vue";
import { snakeToCamel, randInt, randString, RandType } from "buzzts";

const input = ref<string>(randString(randInt(8, 18), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER));
const pascalCase = ref<boolean>(false);
const result = ref<string>("");

function generateCamel() {
  result.value = snakeToCamel(input.value, { pascalCase: pascalCase.value });
}

// 新增随机转换函数
function randomConvert() {
  input.value = randString(randInt(8, 18), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER);
  generateCamel();
}

const resultText = computed(() => {
  if (!result.value) return "请输入蛇形命名字符串后点击转换";
  return `snakeToCamel() = ${result.value}`;
});
</script>

<template>
  <n-card title="蛇形转驼峰命名">
    <n-space vertical>
      <n-input v-model:value="input" label="蛇形命名字符串" />
      <n-checkbox-group v-model:value="pascalCase" multiple={false}>
        <n-checkbox :value="true">转换为帕斯卡命名</n-checkbox>
      </n-checkbox-group>

      <n-space>
        <n-button type="info" @click="randomConvert">随机转换</n-button>
        <n-button type="primary" @click="generateCamel">转换</n-button>
      </n-space>

      <n-gradient-text type="info">{{ resultText }}</n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
snakeCaseStr蛇形命名字符串string无
options配置选项object{}
options.pascalCase是否转换为帕斯卡命名objectfalse
返回值说明
string驼峰命名字符串

​

  • 将蛇形命名字符串转换为驼峰命名
  • 支持转换为帕斯卡命名（首字母大写）

toConstantCase ​

转换为常量命名（全大写下划线）

​

转换为常量命名
请输入字符串后点击转换
查看代码
vue
<script setup lang="ts">
import { ref, computed } from "vue";
import { toConstantCase, randInt, randString, RandType } from "buzzts";

const input = ref<string>(randString(randInt(8, 18), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER));
const preserveNull = ref<boolean>(false);
const result = ref<string | null>("");

function generateConstant() {
  result.value = toConstantCase(input.value, { preserveNull: preserveNull.value });
}

// 新增随机转换函数
function randomConvert() {
  input.value = randString(randInt(8, 18), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER);
  generateConstant();
}

const resultText = computed(() => {
  if (result.value === null || result.value === '') return "请输入字符串后点击转换";
  return `toConstantCase() = ${result.value}`;
});
</script>

<template>
  <n-card title="转换为常量命名">
    <n-space vertical>
      <n-input v-model:value="input" label="输入字符串" />
      <n-checkbox-group v-model:value="preserveNull" multiple={false}>
        <n-checkbox :value="true">非字符串时保留原值</n-checkbox>
      </n-checkbox-group>

      <n-space>
        <n-button type="info" @click="randomConvert">随机转换</n-button>
        <n-button type="primary" @click="generateConstant">转换</n-button>
      </n-space>

      <n-gradient-text type="info">{{ resultText }}</n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
str输入字符串string | null无
options配置选项object{}
options.preserveNull输入非字符串时是否返回原值objectfalse
返回值说明
string | null常量命名字符串或原值

​

  • 将字符串转换为全大写下划线格式
  • 支持保留原值（非字符串）可选配置
  • 已是常量格式时直接返回

camelToSpace ​

驼峰命名转空格命名

​

驼峰转空格命名
请输入驼峰命名字符串后点击转换
查看代码
vue
<script setup lang="ts">
import { ref, computed } from "vue";
import { camelToSpace, randInt, randString, RandType } from "buzzts";

const input = ref<string>(randString(randInt(8, 18), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER));
const capitalize = ref<boolean>(false);
const result = ref<string>("");

function generateSpace() {
  result.value = camelToSpace(input.value, { capitalize: capitalize.value });
}

// 新增随机转换函数
function randomConvert() {
  input.value = randString(randInt(8, 18), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER);
  generateSpace();
}

const resultText = computed(() => {
  if (!result.value) return "请输入驼峰命名字符串后点击转换";
  return `camelToSpace() = ${result.value}`;
});
</script>

<template>
  <n-card title="驼峰转空格命名">
    <n-space vertical>
      <n-input v-model:value="input" label="驼峰命名字符串" />

      <n-checkbox-group v-model:value="capitalize" multiple={false}>
        <n-checkbox :value="true">首字母大写</n-checkbox>
      </n-checkbox-group>

      <n-space>
        <n-button type="info" @click="randomConvert">随机转换</n-button>
        <n-button type="primary" @click="generateSpace">转换</n-button>
      </n-space>

      <n-gradient-text type="info">{{ resultText }}</n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
camelCaseStr驼峰命名字符串string无
options配置选项object{}
options.capitalize是否首字母大写objectfalse
返回值说明
string空格分隔字符串

​

  • 将驼峰命名转换为空格分隔的小写字符串
  • 支持首字母大写选项

maskPhoneNumber ​

加密手机号中间部分

​

手机号加密
手机号
替换字符
替换长度
请输入手机号后点击加密
查看代码
vue
<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { maskPhoneNumber, randString, RandType } from "buzzts";

const phoneNumber = ref<string>(`138${randString(8, RandType.NUMBER)}`); // 默认示例手机号
const maskChar = ref<string>("*");             // 默认替换字符
const maskLength = ref<number>(4);              // 默认替换长度

const result = ref<string>("");

// 监听手机号输入，自动清空结果，避免误导
watch(phoneNumber, () => {
  result.value = "";
});

function generateMaskedPhone() {
  // 简单校验手机号长度
  if (phoneNumber.value.length !== 11 || !/^\d{11}$/.test(phoneNumber.value)) {
    result.value = "请输入有效的11位手机号";
    return;
  }
  result.value = maskPhoneNumber(phoneNumber.value, {
    maskChar: maskChar.value,
    maskLength: maskLength.value,
  });
}

const resultText = computed(() => {
  if (!result.value) return "请输入手机号后点击加密";
  return `maskPhoneNumber(${phoneNumber.value}, {
    maskChar: ${maskChar.value},
    maskLength: ${maskLength.value}
  }) = ${result.value}`;
});
</script>

<template>
  <n-card title="手机号加密">
    <n-space vertical>
      <n-input
        v-model:value="phoneNumber"
        label="手机号"
        placeholder="请输入11位手机号"
        maxlength="11"
        clearable
      />
      <n-text>手机号</n-text>

      <n-input
        v-model:value="maskChar"
        label="替换字符"
        maxlength="1"
        placeholder="默认 *"
      />
      <n-text>替换字符</n-text>

      <n-input-number
        v-model:value="maskLength"
        label="替换长度"
        :min="1"
        :max="11"
      />
      <n-text>替换长度</n-text>

      <n-button type="primary" @click="generateMaskedPhone">加密</n-button>

      <n-gradient-text type="info">{{ resultText }}</n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
phoneNumber手机号码（字符串或数字）string | number无
options配置选项object{}
options.maskChar替换字符string*
options.maskLength替换长度number4
返回值说明
string加密后的手机号

​

  • 支持字符串或数字手机号输入
  • 默认替换中间4位为*
  • 支持自定义替换字符和长度
  • 非合法手机号格式会打印警告并原样返回

truncateText ​

智能截断字符串

​

多组智能截断字符串
原文：Hello world
最大长度：7
截断结果：Hello w...
原文：Hello world
最大长度：10
截断结果：Hello worl...
原文：你好，世界！
最大长度：10
截断结果：你好，世界！
原文：🙂🙃🙂🙃
最大长度：2
截断结果：🙂🙃🙂🙃
原文：🙂🙃🙂🙃
最大长度：1
截断结果：🙂🙃🙂🙃
原文：Hello
最大长度：3
截断结果：Hello
查看代码
vue
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { truncateText, RandType, randInt, randString } from "buzzts";

interface Example {
  text: string;
  maxLength: number;
}

const examples: Example[] = [
  { text: "Hello world", maxLength: 7 },
  { text: "Hello world", maxLength: 10 },
  { text: "你好，世界！", maxLength: 10 },
  { text: "🙂🙃🙂🙃", maxLength: 2 },
  { text: "🙂🙃🙂🙃", maxLength: 1 },
  { text: "Hello", maxLength: 3 },
];

// 计算示例的截断结果
const exampleResults = computed(() =>
  examples.map((ex) =>
    truncateText(ex.text, ex.maxLength, { ellipsis: "..." })
  )
);
</script>

<template>
  <n-card title="多组智能截断字符串">
    <n-divider>示例展示</n-divider>
    <n-space vertical>
      <div
        v-for="(ex, i) in examples"
        :key="i"
        style="border: 1px solid #eee; padding: 8px; border-radius: 4px; margin-top: 8px;"
      >
        <div><strong>原文：</strong>{{ ex.text }}</div>
        <div><strong>最大长度：</strong>{{ ex.maxLength }}</div>
        <div><strong>截断结果：</strong>{{ exampleResults[i] }}</div>
      </div>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
text原始文本string无
maxLength最大长度number无
options配置选项object{}
options.ellipsis省略符号string...
options.keepWords是否保持单词完整objecttrue
返回值说明
string截断后的字符串

​

  • 超出长度时智能截断
  • 支持保持单词完整或直接截断
  • 支持自定义省略符号

escapeHtml ​

HTML特殊字符转义

​

HTML特殊字符转义
请输入HTML字符串后点击转义
查看代码
vue
<script setup lang="ts">
import { ref, computed } from "vue";
import { escapeHtml } from "buzzts";

const input = ref<string>('<div class="test">Hello & Welcome!</div>'); 
const result = ref<string>("");

function generateEscaped() {
  result.value = escapeHtml(input.value);
}

const resultText = computed(() => {
  if (!result.value) return "请输入HTML字符串后点击转义";
  return `escapeHtml() = ${result.value}`;
});
</script>

<template>
  <n-card title="HTML特殊字符转义">
    <n-space vertical>
      <n-input v-model:value="input" label="HTML字符串" type="textarea" />

      <n-button type="primary" @click="generateEscaped">转义</n-button>

      <n-gradient-text type="info">{{ resultText }}</n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
htmlStr包含HTML的字符串string无
返回值说明
string转义后的安全字符串

​

  • 将 HTML 特殊字符转换为对应的实体编码
  • 保障字符串安全防止XSS等攻击

unescapeHtml ​

HTML实体反转义

​

HTML实体反转义
请输入转义后的字符串
查看代码
vue

<script setup lang="ts">
import { ref, computed } from "vue";
import { unescapeHtml, randInt, randString, RandType } from "buzzts";

const input = ref<string>('');

function generateInput() {
  const randomSuffix = randString(randInt(5, 20), RandType.LOWERCASE | RandType.CAPITAL | RandType.NUMBER);
  input.value = `&lt;div class=&quot;test&quot;&gt;Hello &amp; ${randomSuffix} Welcome!&lt;&#x2F;div&gt;`;
}
generateInput();

const result = ref<string>('');

function handleUnescape() {
  result.value = unescapeHtml(input.value);
}

const resultText = computed(() => {
  if (!result.value) return "请输入转义后的字符串";
  return `unescapeHtml() = ${result.value}`;
});
</script>

<template>
  <n-card title="HTML实体反转义">
    <n-space vertical>
      <n-input v-model:value="input" label="转义字符串" placeholder="例如 &amp;lt;div&amp;gt;" />

      <n-button type="primary" @click="handleUnescape">反转义</n-button>

      <n-gradient-text type="info">{{ resultText }}</n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
escapedStr转义后的字符串string无
返回值说明
string原始字符串

​

  • 将 HTML 实体编码转换回对应字符
  • 反转义常见实体，恢复原始字符串

strReplace ​

将字符串中指定区间的字符替换为指定字符串（支持多字符替换、删除、负数索引）

​

strReplace - 字符串指定区间替换演示
strReplace("123756789", 3, 6, "*") = ""
查看代码
vue
<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import { strReplace } from "buzzts";

type DemoItem = {
  label: string;
  str: string;
  start: number;
  end: number;
  replacement: string;
};

const demos: DemoItem[] = [
  { label: "替换中间4个字符为 '*'", str: "123756789", start: 3, end: 6, replacement: "*" },
  { label: "负索引替换4个字符为 '#'", str: "123756789", start: -6, end: -3, replacement: "#" },
  { label: "替换多字符", str: "abcdefg", start: 2, end: 5, replacement: "XY" },
  { label: "删除区间字符", str: "abcdefg", start: 2, end: 5, replacement: "" },
];

const selectedIndex = ref(0);
const str = ref(demos[0].str);
const start = ref(demos[0].start);
const end = ref(demos[0].end);
const replacement = ref(demos[0].replacement);
const result = ref<string>("");

function doReplace() {
  result.value = strReplace(str.value, start.value, end.value, replacement.value);
}

function selectDemo(index: number) {
  selectedIndex.value = index;
  str.value = demos[index].str;
  start.value = demos[index].start;
  end.value = demos[index].end;
  replacement.value = demos[index].replacement;
  doReplace();
}

watch([str, start, end, replacement], () => {
  doReplace();
});

onMounted(() => {
  doReplace();
});

const resultText = computed(() => `strReplace("${str.value}", ${start.value}, ${end.value}, "${replacement.value}") = "${result.value}"`);
</script>

<template>
  <n-card title="strReplace - 字符串指定区间替换演示">
    <n-space vertical size="large">
      <n-space wrap>
        <n-button
          v-for="(item, index) in demos"
          :key="index"
          size="small"
          :type="selectedIndex === index ? 'primary' : 'default'"
          @click="selectDemo(index)"
        >
          {{ item.label }}
        </n-button>
      </n-space>

      <n-form-item label="原字符串">
        <n-input v-model:value="str" placeholder="请输入原始字符串" />
      </n-form-item>

      <n-form-item label="开始索引">
        <n-input-number v-model:value="start" :min="-str.length" :max="str.length" />
      </n-form-item>

      <n-form-item label="结束索引">
        <n-input-number v-model:value="end" :min="-str.length" :max="str.length" />
      </n-form-item>

      <n-form-item label="替换字符串">
        <n-input v-model:value="replacement" placeholder="替换字符串，空字符串表示删除" />
      </n-form-item>

      <n-button type="primary" @click="doReplace">替换</n-button>

      <n-gradient-text type="info" style="margin-top: 12px;">
        {{ resultText }}
      </n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
str原始字符串，必须是字符串类型string无
start开始替换位置，支持负数索引（负数表示从末尾计数）number无
end结束替换位置，支持负数索引，包含该位置number无
replacement替换字符串，必传，可多字符，空字符串表示删除string无
返回值说明
string替换后的新字符串

​

  • 替换区间包含结束索引
  • 支持负数索引
  • 替换字符串可为空表示删除

chunkString ​

将输入字符串按照指定的块大小分割成多个子字符串。

​

chunkString - 字符串分块演示
请设置字符串和块大小
查看代码
vue
<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import { chunkString } from "buzzts";

type DemoItem = {
  label: string;
  str: string;
  chunkSize: number;
};

const demos: DemoItem[] = [
  { label: "字符串长度5，块大小3", str: "abcde", chunkSize: 3 },
  { label: "字符串长度26，块大小5", str: "abcdefghijklmnopqrstuvwxyz", chunkSize: 5 },
  { label: "空字符串", str: "", chunkSize: 1 },
  { label: "字符串长度7，块大小2", str: "1234567", chunkSize: 2 },
];

const selectedIndex = ref(0);
const str = ref(demos[0].str);
const chunkSize = ref(demos[0].chunkSize);
const result = ref<string[] | null>(null);
const errorMsg = ref<string>("");

function tryChunkString() {
  errorMsg.value = "";
  try {
    result.value = chunkString(str.value, chunkSize.value);
  } catch (error: any) {
    result.value = null;
    errorMsg.value = error.message || "未知错误";
  }
}

function selectDemo(index: number) {
  selectedIndex.value = index;
  str.value = demos[index].str;
  chunkSize.value = demos[index].chunkSize;
  tryChunkString();
}

watch([str, chunkSize], () => {
  tryChunkString();
});

onMounted(() => {
  tryChunkString();
});

const resultText = computed(() => {
  if (errorMsg.value) return `错误: ${errorMsg.value}`;
  if (!result.value) return "请设置字符串和块大小";
  return JSON.stringify(result.value);
});
</script>

<template>
  <n-card title="chunkString - 字符串分块演示">
    <n-space vertical size="large">
      <n-space wrap>
        <n-button
          v-for="(item, index) in demos"
          :key="index"
          size="small"
          :type="selectedIndex === index ? 'primary' : 'default'"
          @click="selectDemo(index)"
        >
          {{ item.label }}
        </n-button>
      </n-space>

      <n-form-item label="输入字符串">
        <n-input v-model:value="str" placeholder="请输入字符串" />
      </n-form-item>

      <n-form-item label="块大小">
        <n-input-number v-model:value="chunkSize" :min="1" />
      </n-form-item>

      <n-button type="primary" @click="tryChunkString">分块</n-button>

      <n-gradient-text type="info" style="margin-top: 12px;">
        {{ resultText }}
      </n-gradient-text>
    </n-space>
  </n-card>
</template>

​

参数属性说明类型默认值
str要分割的字符串string无
chunkSize每个子字符串长度，必须大于0number无
返回值说明
string[]分割后的字符串数组

​

  • 当参数类型错误会抛出异常
  • chunkSize 必须为正整数
  • 支持最后一块长度小于 chunkSize

replaceCRLF ​

将字符串中的回车换行符替换为指定的替换字符串。

​

回车换行符替换
替换字符串：
Hello,
World!
This is a test.
查看代码
vue
<script setup lang="ts">
import { ref, computed } from "vue";
import { replaceCRLF } from 'buzzts';

const inputText = ref("Hello,\nWorld!\rThis is a test.");
const replacementString = ref('<br/>');

// 计算替换结果
const replacedResult = computed(() => replaceCRLF(inputText.value, replacementString.value));
</script>

<template>
  <n-card title="回车换行符替换">
    <n-divider>输入文本</n-divider>
    <div>
      <n-input
        v-model:value="inputText"
        type="textarea"
        rows="4"
        style="width: 100%;"
        placeholder="请输入文本..."
      />
    </div>
    <div>
      <strong>替换字符串：</strong>
      <n-input
        v-model:value="replacementString"
        style="width: 100%;"
        placeholder="请输入替换字符串..."
      />
    </div>
    <n-divider>替换结果</n-divider>
    <div v-html="replacedResult"></div>
  </n-card>
</template>

​

参数属性说明类型默认值
v需要进行替换的字符串string无
replacement替换字符串string<br/>
返回值说明
string替换后的字符串，其中所有的回车和换行符均被替换为指定的替换字符串

​

  • 将输入字符串中的回车符（\r）和换行符（\n）替换为指定的替换字符串。
  • 如果输入非字符串或空字符串，则返回原字符串。

filterString ​

替换指定范围内的字符为指定的分隔符。

​

指定范围内字符替换
分隔符：
开始索引：
结束索引：
Hello*****ld!
查看代码
vue
<script setup lang="ts">
import { ref, computed } from "vue";
import { filterString } from 'buzzts';

const filteredString = ref("Hello, World!");
const sepString = ref('*');
const startIndex = ref(5);
const endIndex = ref(10);

// 计算过滤结果
const filteredResult = computed(() => filterString(filteredString.value, sepString.value, startIndex.value, endIndex.value));
</script>

<template>
  <n-card title="指定范围内字符替换">
    <n-divider>待替换文本</n-divider>
    <div>
      <n-input
        v-model:value="filteredString"
        style="width: 100%;"
        placeholder="请输入待替换文本..."
      />
    </div>
    <div>
      <strong>分隔符：</strong>
      <n-input
        v-model:value="sepString"
        style="width: 100%;"
        placeholder="请输入分隔符..."
      />
    </div>
    <div>
      <strong>开始索引：</strong>
      <n-input
        type="number"
        v-model:value="startIndex"
        style="width: 100%;"
        placeholder="请输入开始索引..."
      />
    </div>
    <div>
      <strong>结束索引：</strong>
      <n-input
        type="number"
        v-model:value="endIndex"
        style="width: 100%;"
        placeholder="请输入结束索引..."
      />
    </div>
    <n-divider>过滤结果</n-divider>
    <div>{{ filteredResult }}</div>
  </n-card>
</template>

​

参数属性说明类型默认值
val需要进行过滤的字符串string无
sep替换字符的分隔符string*
start替换开始的索引number0
end替换结束的索引number字符串的长度
返回值说明
string返回过滤后的字符串，其中指定范围内的字符被替换为分隔符

​

  • 将指定范围内的字符替换为给定的分隔符。
  • 如果输入非字符串或空字符串，则返回原字符串。

Released under the MIT License

Copyright © 2025-present kamalyes