如何使用 JavaScript 將 Title 轉換為 URL Slug？-js教程-PHP中文網

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 10, 2023 pm 06:45 PM

如何使用 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 按鈕“
第 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 id="Title-to-URL-Slug-Conversion">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？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。