Cara Membuat Slug dengan Javascript

10/02/2020    Risman Hakim    40     Website

Cara Membuat Slug dengan Javascript - Slug merupakan rangkaian teks yang terletak dibagian url setelah nama domain, penggunaan slug sangat bermanfaat untuk mesin pencari agar mudah dikenali kontennya, ini berguna juga untuk meningkatkan SEO. Kalian bisa melihat contoh penggunaan slug seperti pada website dumetschool https://www.dumetschool.com/blog/cara-simpel-membuat-multi-level-bootstrap-4. Dikesempatan kali ini saya akan bagikan tutorial sederhana bagaimana Cara Membuat Slug dengan Javascript, ini akan sangat berguna buat kalian yang ingin membuat slug url, seperti apa cara membuatnya. Simak langkah - langkah membuat slug berikut ini.

Buatlah elemen inputan untuk teks yang akan di generate menjadi slug, kalian bisa ketikan seperti sintak berikut ini.

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card border-dark">
                <div class="card-header bg-dark"><h4 class="mb-0 text-white">Cara Membuat Slug Dengan Javascript</h4></div>
                <div class="card-body">
                   <form>
                        <div class="form-group">
                            <label for="Title">Judul Artikel</label>
                            <input type="text" class="form-control border-dark" name="" id="title" onkeyup="createTextSlug()">
                        </div>
                        <div class="form-group">
                            <label for="Slug">Slug</label>
                            <input type="text" class="form-control border-dark" name="slug" id="slug">
                        </div>
                        <button class="btn btn-dark">Simpan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Pada kasus diatas elemen inputan dan layout saya buat dengan framework bootstrap 4. Setelah membuat elemen inputan seperti diatas selanjutnya membuat fungsi untuk men-generate teks menjadi slug dengan sintak javascript seperti berikut.

<script>
    function createTextSlug()
    {
        var title = document.getElementById("title").value;
                    document.getElementById("slug").value = generateSlug(title);
    }
    function generateSlug(text)
    {
        return text.toString().toLowerCase()
            .replace(/^-+/, '')
            .replace(/-+$/, '')
            .replace(/\s+/g, '-')
            .replace(/\-\-+/g, '-')
            .replace(/[^\w\-]+/g, '');
    }
</script>

Jika sudah kalian ketikan sintak javascript diatas, selanjutnya silahkan kalian coba buka dibrowser lalu dites apakah fungsi untuk men-generate slug berhasil. Jika berhasil maka akan terlihat seperti gambar berikut.

Cara Membuat Slug dengan Javascript

Baiklah, cukup sekian tutorial sederhana bagaimana Cara Membuat Slug dengan Javascript semoga bermanfaat. Selamat mencoba dan sampai jumpa di tutorial dumetschool selanjutnya.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More