本文介绍一种在react应用中基于标题生成seo友好的slug的函数slugify。 该函数避免使用容易泄露信息的数据库id作为url的一部分，而是利用文章标题生成更易于理解和搜索引擎优化的url。
文章指出，直接使用数据库ID(_id)作为URL会暴露原始数据，不利于SEO。而使用slug（基于标题生成的URL片段）则能改善URL的可读性和搜索引擎优化效果。
以下代码片段展示了slugify函数的核心逻辑，以及辅助函数format和getsaferegexpstring：
function getsaferegexpstring(input) { return input.split("").map((char) => `\${char}`).join("");}import { remove as stripaccents} from 'diacritics';function format(input, delimiter, ignoreinvalid = false) { const harmonized = stripaccents(input).trim().toLowerCase(); const safedelimiter = getsaferegexpstring(delimiter); if (ignoreinvalid) { return harmonized.replace(/s+/g, delimiter); } return harmonized .replace(new RegExp(`[^a-z0-9\u0900-\u097f${safedelimiter}]+`, "g"), delimiter) .replace(new RegExp(`${safedelimiter}+`, "g"), delimiter) .replace(new RegExp(`^${safedelimiter}`, "g"), "") .replace(new RegExp(`${safedelimiter}$`, "g"), "");};export default function slugify(node, options = { delimiter: "-", prefix: "" }) { if (!options.delimiter) options.delimiter = "-"; if (!options.prefix) options.prefix = ""; if (!node || typeof node === "boolean") { return ""; } const { delimiter, prefix } = options; if (typeof node === "boolean") { return ""; } if (typeof node === "string" || typeof node === "number") { const harmonizedPrefix = format(prefix, delimiter, true); const harmonizedNode = format(String(node), delimiter); if (harmonizedPrefix) { return `${harmonizedPrefix}${delimiter}${harmonizedNode}`; } return harmonizedNode; } if ("children" in node) { return slugify(node.children); } if ("type" in node) return slugify(node.props.children, options); if (Symbol.iterator in node) { return slugify( Array.from(node) .map((subNode) => slugify(subNode, { delimiter })) .join(delimiter), options ); } return "";};
登录后复制
getsaferegexpstring函数用于转义特殊字符，format函数使用diacritics包去除变音符号，并对输入进行规范化处理，最终生成slug。slugify函数则根据输入节点类型递归处理，最终生成完整的slug。 该函数支持自定义分隔符和前缀。
以上就是在React中使用标题创建slug的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2640884.html
