Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar Tajuk kepada Slug URL menggunakan JavaScript?

Bagaimana untuk menukar Tajuk kepada Slug URL menggunakan JavaScript?

WBOYke hadapan: 2023-09-10 18:45:081061semak imbas

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

Gambaran Keseluruhan

Tukar Tajuk kepada URL Slug Juga dikenali sebagai "Slugify" Tajuk. Slug URL ialah tajuk yang deskriptif dan mudah dibaca. Ia dilampirkan pada URL halaman, yang menceritakan kisah halaman semasa, kerana slug menggambarkan diri. Oleh itu, menukar pengepala kepada slug menggunakan JavaScript boleh dicapai menggunakan fungsi JavaScript tertentu seperti toLowerCase(), replace(), trim().

Algoritma

Langkah 1 - Buat halaman HTML yang mengandungi dua teg input, dan tambahkan atribut id sebagai "title" dan "urlSlug" masing-masing, input pertama Elemen akan menerima input daripada pengguna sebagai tajuk dan label lain akan memaparkan slug URL. Buat juga butang HTML "07cb10094d7fc1aeafbde86dbf86ce42" dengan acara onclick() yang mengandungi fungsi "convert()".
Langkah 2 - Sekarang buat fungsi anak panah “convert()” sebagai JavaScript dalaman halaman HTML.

convert=()=>{}

Langkah 3 - Akses nilai teg input pertama dengan id "document.getElementById("title")".nilai dan simpan nilai itu di tengah pembolehubah.

document.getElementById('title').value;

Langkah 4 - Tukar nilai yang diterima daripada tajuk kepada huruf kecil menggunakan fungsi "toLowerCase()" rentetan. "t" ialah pembolehubah yang menerima tajuk.

t.toLowerCase();

Langkah 5 - Sekarang gunakan fungsi “trim()” untuk mengalih keluar ruang hadapan dan belakang daripada tajuk.

t.trim();

Langkah 6 - Gunakan fungsi "replace()" dengan corak untuk menggantikan semua ruang dalam tajuk dengan sempang "-"

title with “-” dash, using “replace()” function with a pattern
t.replace(/[^a-z0-9]+/g, '-');

Langkah 7 - Slug URL sedia dan dipaparkan pada skrin penyemak imbas.

document.getElementById('urlSlug').value = slug;

Contoh

Dalam contoh ini, kami mendapat tajuk daripada pengguna sebagai input. Apabila pengguna memasukkan sebarang tajuk dan mengklik butang, fungsi Convert() dicetuskan, yang menukar nilai tajuk kepada huruf kecil dan kemudian menukar semua ruang hadapan dan belakang tajuk kepada huruf kecil. Kemudian, dalam tajuk yang diberikan, ruang akan digantikan dengan sempang (-), dan slug URL akan dipaparkan pada teg input baca sahaja penyemak imbas.

<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>

Dalam output contoh di atas, tajuk yang dimasukkan oleh pengguna ialah "Tutorial Point Article". Selepas mengklik "Tukar Sekarang", tajuk akan ditukar menjadi Slug URL, iaitu "Artikel Mata Tutorial". Yang menggunakan fungsi trim() untuk mengalih keluar ruang mengekor dan menggantikannya dengan sempang.

KESIMPULAN

Uniform Resource Locator (URL) Slug membantu meningkatkan kedudukan carian halaman anda. Oleh itu, slug URL mesti berada dalam URL, dan oleh kerana semua perkataan dalam URL adalah huruf kecil, tajuk juga ditukar kepada huruf kecil terlebih dahulu. Untuk berhati-hati terhadap slug dalam URL, cuma ambil mana-mana artikel, blog atau mana-mana kandungan laman web lain dan perhatikan titik akhir URL, jika ia muncul dalam ayat maka ia akan berakhir dengan yang sama seperti contoh kami di atas.

Atas ialah kandungan terperinci Bagaimana untuk menukar Tajuk kepada Slug URL menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 字符串事件 input 算法

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk mengalih keluar sifat CSS menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk mengalih keluar sifat CSS menggunakan JavaScript?

Artikel berkaitan

Lihat lagi