如何使用 JavaScript 將 Title 轉換為 URL Slug？

概述

將標題轉換為 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 按鈕“”，其中包含函數“convert()”。

• 第 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 將顯示在瀏覽器只讀輸入標記上。

   


   
      
Title to URL Slug Conversion
      Title:
       

      URL Slug:
      

      Covert Now
      
   

在上面範例的輸出中，使用者輸入的標題為「教學點文章」。點擊“立即轉換”後，標題將轉換為 URL Slug，即“教程點文章”。其中使用 trim() 函數刪除尾隨空格，並用連字號取代空格。

結論

統一資源定位器 (URL) Slug 有助於提高頁面的搜尋排名。因此，URL Slug 必須位於 URL 中，並且由於 URL 中的所有單字都是小寫，因此標題也首先轉換為小寫。要注意 URL 中的 slug，只需獲取網站的任何文章、部落格或任何其他內容，觀察 URL 的端點，如果它出現在句子中，那麼它將以與我們在上面的範例。

以上是如何使用 JavaScript 將 Title 轉換為 URL Slug？的詳細內容。更多資訊請關注PHP中文網其他相關文章！