Javascript ganti teks dengan tautan

Dapatkan akses penuh ke Regular Expressions Cookbook dan 60K+ judul lainnya, dengan uji coba gratis O'Reilly selama 10 hari

Ada juga acara online langsung, konten interaktif, materi persiapan sertifikasi, dan banyak lagi

Saya akan mereferensikan pustaka webflow-utils saya yang memiliki beberapa contoh jenis kode yang Anda perlukan untuk melakukan tugas ini

Pendekatan yang Anda ambil akan sangat bergantung pada berapa banyak tautan yang perlu Anda ubah, seberapa mudah mereka mengidentifikasi di halaman Anda, apakah mereka mungkin memiliki bagian kunci/nilai querystring lainnya, dan seterusnya

Namun, ada tiga langkah dasar untuk apa yang ingin Anda lakukan;

1. Identifikasi tautan mana yang ingin Anda ubah, mungkin dengan ID, atau kelas, atau atribut khusus. Bahkan mungkin ada sesuatu yang unik di URL href itu sendiri. Buat tautan Anda dapat diidentifikasi dengan cara tertentu, sehingga skrip Anda tahu mana yang harus dimodifikasi, dan mana yang tidak tersentuh

2. Dalam acara jQuery saat memuat halaman, Anda akan memilih elemen yang diinginkan. Sebelum / badan…

$(function () {
// your code here
});

1. Untuk setiap elemen yang Anda cocokkan, ubah href sesuka Anda

Anda dapat menemukan beberapa kode contoh untuk pemilihan elemen dan langkah-langkah modifikasi href di sini;

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

Kerja bagus. Saya telah memotong pulpen Anda dan membuat beberapa mod, coba ini;

Saya menggunakan akun pro Codepen, jadi untuk pengujian, Anda dapat mengomentari skrip Anda, lalu menempelkannya ke kode halaman Anda sebelum </body>

<script src="https://codepen.io/memetican/pen/BargWvZ/eecc8cfd1f2a5d371ad9d5210660f3e4.js"></script>

Perubahan kunci;

• Saya menggunakan jQuery, itu hanya sebagai sintaks yang lebih rapi, dan Webflow sudah menyertakan pustaka jQuery
• Mengganti pendengar acara dengan jQuery pada sintaks yang dimuat DOM, semoga itu akan menyelesaikan konflik Anda
• Membatasi pemilihan elemen <a>_ untuk elemen yang memiliki href yang berisi teks

  
  /*
   * webflow-url
   * 
   * Sygnal Technology Group
   * http://sygnal.com
   * 
   * Url Utilities
   */
  
  // Process elements with the custom attr wfu-query-param
  export var processElements = function () {
  
      const urlParams = new URLSearchParams(window.location.search);
  
      // Skip if there is no querystring
      if (Array.from(urlParams).length == 0)
          return;
  
      // Loop all processable elements
  

  0. Ini hanya berfokus pada elemen yang paling mungkin membutuhkan transformasi
• Hampir semua yang tersisa apa adanya, kerja bagus
• Menambahkan dukungan untuk penghapusan protokol Anda. Karena kita tahu URL yang disandikan dengan benar dan sah akan memiliki satu dan hanya satu

  
  /*
   * webflow-url
   * 
   * Sygnal Technology Group
   * http://sygnal.com
   * 
   * Url Utilities
   */
  
  // Process elements with the custom attr wfu-query-param
  export var processElements = function () {
  
      const urlParams = new URLSearchParams(window.location.search);
  
      // Skip if there is no querystring
      if (Array.from(urlParams).length == 0)
          return;
  
      // Loop all processable elements
  

  1 kita dapat membaginya dan mengambil bagian kedua

Perhatikan bahwa menggunakan objek URL akan menyandikan URL dengan benar string Anda, jadi dalam contoh yang Anda inginkan;

https://app.example.com/?redirect=www.example.com/about/dog

Anda sebenarnya akan mendapatkan yang lebih benar;

https://app.example.com/?redirect=www.example.com%2Fabout%2Fdog

Juga dalam desain Anda saat ini, jika URL halaman Anda saat ini memiliki querystring, itu akan disertakan juga dalam href. Saya berasumsi bahwa itulah yang Anda cari, tetapi tunjukkan untuk berjaga-jaga

Querystring tidak umum di situs Webflow, namun Anda mungkin melihatnya jika mis. g. Anda memiliki Iklan Google yang mengarah ke halaman Anda dan Google menambahkan

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

Dan subpoin yang sangat menarik. Jika Anda menjalankan skrip Anda pada halaman di dalam IFRAME, maka

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

Bagaimana cara mengganti teks dengan tautan?

Bagaimana cara mengganti string di URL dalam JavaScript?