实现 Slugify 工具

分类：developer ｜ 标签：slug、url、别名 生成 URL 友好的 slug，支持分隔符与 ASCII 选项

2.1 功能说明

生成 URL 友好的 slug，支持分隔符与 ASCII 选项

2.1.1 使用指南

功能说明

将任意文本转换为 URL 友好的 slug：小写、空格与标点替换为分隔符、去除非法字符。可选保留 Unicode 字符。

使用场景

生成文章 URL、文件名、静态站点路径。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const text = ref('')
const lower = ref(true)
const strict = ref(false)
const sep = ref('-')

const out = computed(() => {
  let s = text.value
  if (!s) return ''
  if (strict.value) s = s.normalize('NFKD').replace(/[̀-ͯ]/g, '').replace(/[^\w\s-]/g, '')
  else s = s.replace(/[^\p{L}\p{N}\s_-]/gu, '')
  s = s.trim().replace(/\s+/g, sep.value || ' ')
  if (lower.value) s = s.toLowerCase()
  if (sep.value) s = s.replace(new RegExp(sep.value + '+', 'g'), sep.value).replace(new RegExp('^' + sep.value + '|' + sep.value + '$', 'g'), '')
  return s
})

function copy() {
  if (out.value) navigator.clipboard?.writeText(out.value)
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/slugify