概述
将标题转换为 URL Slug 也称为“Slugify”标题。 URL Slug 是指本身具有描述性且易于阅读的标题。它附加到页面的 URL 上，该 URL 讲述当前页面，因为 slug 是自我描述的。因此，使用 JavaScript 将标题转换为 slug 可以使用某些 JavaScript 函数来实现，例如 toLowerCase()、replace()、trim()。
算法
步骤 1 - 创建一个包含两个 input 标签的 HTML 页面，并在其中分别添加 id 属性作为“title”和“urlSlug”，第一个 input 元素将接收来自的输入用户作为标题，另一个标签将显示 URL Slug。还创建一个带有 onclick() 事件的 HTML 按钮“
第 2 步 - 现在创建一个“convert()”箭头函数作为 HTML 页面的内部 JavaScript。
convert=()=>{}
第 3 步 - 访问 id 为“document.getElementById(“title”)”.value 的第一个输入标记的值并将该值存储在变量中。
document.getElementById('title').value;
-
步骤 4 - 使用字符串的“toLowerCase()”函数将从标题接收到的值转换为小写字母。 “t”是接收标题的变量。
立即学习“Java免费学习笔记（深入）”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件下载如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
t.toLowerCase();
第 5 步 - 现在使用“trim()”函数删除标题中的前导和尾随空格。
t.trim();
第 6 步 - 使用带有模式的“replace()”函数，用“-”破折号替换标题的所有空格
title with “-” dash, using “replace()” function with a pattern t.replace(/[^a-z0-9]+/g, '-');
第 7 步 - URL Slug 已准备就绪，显示在浏览器屏幕上。
document.getElementById('urlSlug').value = slug;
示例
在此示例中，我们从用户处获取标题作为输入。当用户输入任何标题并单击按钮时，将触发 Convert() 函数，该函数将标题值更改为小写，然后将标题的所有前导和尾随空格更改为小写。然后，在给定标题中，空格将替换为破折号 (-)，并且 URL Slug 将显示在浏览器只读输入标记上。
Convert title to URL Slug Title to URL Slug Conversion
在上面示例的输出中，用户输入的标题为“教程点文章”。单击“立即转换”后，标题将转换为 URL Slug，即“教程点文章”。其中使用 trim() 函数删除尾随空格，并用连字符替换空格。
结论
统一资源定位器 (URL) Slug 有助于提高页面的搜索排名。因此，URL Slug 必须位于 URL 中，并且由于 URL 中的所有单词都是小写，因此标题也首先转换为小写。要注意 URL 中的 slug，只需获取网站的任何文章、博客或任何其他内容，观察 URL 的端点，如果它出现在句子中，那么它将以与我们在上面的例子。
