JavaScript 如何将标题转换为URL Slug

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

先决条件

HTML基础知识
JavaScript基础知识

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

方法

创建一个带有输入标题和输出URL Slug的HTML表单，并设置唯一的id。
给元素添加一些CSS样式。
在JavaScript中，我们使用 replace() 函数来生成字符串slug。
生成的slug字符串可以进一步用于URL中。

示例： 以下是基本的HTML代码实现：

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

HTML代码

<!DOCTYPE html>
<html>
 
<head>
    <style>
        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-output {
            color: #05ab13;
            font-size: 20px;
            font-weight: 500;
        }
    </style>
</head>
 
<body>
    <form>
        <fieldset class="slugify">
            <legend>
                  GeeksforGeeks
              </legend>
 
            <label for="slug-source">
                  Input Title: 
              </label>
            <input type="text" value=""
                   id="slug-source" />
 
            <label for="slug-target">
                  URL Slug: 
              </label>
            <input type="text" value=""
                   id="slug-target" />
 
            <button type="button"
                    onClick="myFunction()">
                Convert
            </button>
 
            <p>
                <span class="slug-output">
                    Generated URL Slug
                </span>:
                <span id="slug-target-span"></span>
            </p>
        </fieldset>
    </form>
</body>
 
</html>

输出：

JavaScript 如何将标题转换为URL Slug