如何使用 JavaScript 将标题转换为 URL Slug？

给定一个标题，任务是使用 JavaScript 将标题转换为 URL slug。在本文中，我们将使用 HTML 来设计 body 的基本结构，使用 CSS 设置 body 的样式，使用 JavaScript 来实现逻辑结构。

先决条件：

• HTML 基础
• JavaScript 基础

基本上下面的程序将使用 JavaScript 将标题转换为 URL Slug。

方法：

• 创建一个 HTML 表单，其中输入标题并输出具有唯一 ID 的 URL slug。
• 向元素添加一些 CSS 样式。

下面是基本的 HTML 代码实现：

HTML

  

    

  

    

        

            
GeeksforGeeks
  
            Input Title: 
            
  
            URL Slug: 
            
  
            
                Convert
            
  
  
            

                
                    Generated URL Slug
                :
                
            
        
    

  

• 在这里，我们使用了 JavaScript 中的replace()函数来制作字符串slug。
• 创建的 slug字符串可以进一步用于 URL。

下面是 JavaScript 代码实现：

Javascript

    function myFunction() {
  
        var a = document.getElementById("slug-source").value;
  
        var b = a.toLowerCase().replace(/ /g, '-')
            .replace(/[^\w-]+/g, '');
  
        document.getElementById("slug-target").value = b;
  
        document.getElementById("slug-target-span").innerHTML = b;
    }

示例：在本示例中，我们将结合以上两段代码(HTML 和 JavaScript 代码)将标题转换为 URL slug。

HTML

  

    
        fieldset.slugify {
            color: #515151;
            border: 1px solid #ccc;
            padding: 15px;
        }
  
        .slugify legend {
            font-size: 16px;
            font-weight: 600;
            padding: 0 10px;
        }
  
        .slugify input {
            display: block;
            padding: 8px;
            margin: 8px;
        }
  
        .slug-ouput {
            color: #05ab13;
            font-size: 20px;
            font-weight: 500;
        }
    

  

    
        
            GeeksforGeeks
  
            Input Title: 
            
  
            URL Slug: 
            
  
            
                Convert
            
  
  
            
                Generated URL Slug:
                
            
  
        
    
  
    
        function myFunction() {
  
            var a = document.getElementById("slug-source").value;
  
            var b = a.toLowerCase().replace(/ /g, '-')
                .replace(/[^\w-]+/g, '');
  
            document.getElementById("slug-target").value = b;
  
            document.getElementById("slug-target-span").innerHTML = b;
        }
    

  

输出：