概述
將標題轉換為 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”是接收標題的變量。
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 將顯示在瀏覽器只讀輸入標記上。
<html lang="en">
<head>
<title>Convert title to URL Slug</title>
</head>
<body>
<h3>Title to URL Slug Conversion</h3>
<label>Title:</label>
<input type="text" id="title" value="" placeholder="Enter title here"> <br />
<label>URL Slug:</label>
<input type="text" id="urlSlug" style="margin:0.5rem 0;border-radius:5px;border:transparent;padding: 0.4rem;color: green;" placeholder="Slug will appear here..." readonly><br />
<button onclick="convert()" style="margin-top: 0.5rem;">Covert Now</button>
<script>
// This function converts the title to URL Slug
convert = () => {
var t = document.getElementById('title').value;
t = t.toLowerCase(); //t is the title received
t = t.trim(); // trim the spaces from start and end
var slug = t.replace(/[^a-z0-9]+/g, '-'); // replace all the spaces with "-"
document.getElementById('urlSlug').value = slug;
document.getElementById('urlSlug').style.border="0.1px solid green";
}
</script>
</body>
</html>
登錄后復制
在上面示例的輸出中，用戶輸入的標題為“教程點文章”。單擊“立即轉換”后，標題將轉換為 URL Slug，即“教程點文章”。其中使用 trim() 函數刪除尾隨空格，并用連字符替換空格。
結論
統一資源定位器 (URL) Slug 有助于提高頁面的搜索排名。因此，URL Slug 必須位于 URL 中，并且由于 URL 中的所有單詞都是小寫，因此標題也首先轉換為小寫。要注意 URL 中的 slug，只需獲取網站的任何文章、博客或任何其他內容，觀察 URL 的端點，如果它出現在句子中，那么它將以與我們在上面的例子。
以上就是如何使用 JavaScript 將 Title 轉換為 URL Slug？的詳細內容，更多請關注www.92cms.cn其它相關文章！
