最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • 如何使用 JavaScript 将 Title 转换为 URL Slug?

    如何使用 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>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 的端点,如果它出现在句子中,那么它将以与我们在上面的例子。

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » 如何使用 JavaScript 将 Title 转换为 URL Slug?
    • 5会员总数(位)
    • 21779资源总数(个)
    • 648本周发布(个)
    • 0 今日发布(个)
    • 171稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情