Rumah hujung hadapan web tutorial js javascript自动给文本url地址增加链接的方法分享_javascript技巧

javascript自动给文本url地址增加链接的方法分享_javascript技巧

May 16, 2016 pm 05:03 PM
url teks Pautan

URL地址自动添加的实现其实就是那么点内容:检测与替换。

检测

“检测”就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用JavaScript实现。

验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):

复制代码 代码如下:

var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g;

前一部分匹配http或是https开头的URL字符串地址,后面一部分匹配一些字符,英文字符、下划线(_)、点号(.)、问号(?)以及等号(=),连接短线(-)等。

替换 www.jb51.net
说到JavaScript中的替换功能,首先想到的自然是replace属性了,replace属性强大之处在于其支持正则表达式,可以对符合正则的字符串进行替换。例如,我们要替换掉字符串两端的空格就可以使用类似下面的语句:

复制代码 代码如下:

var s = " blank ";
s = s.replace(/^s+(.*?)s+$/, "");
alert(s);

就会得到”blank”,两端的空格被剔除了。同样的,这里只要将匹配的http地址替换成标签嵌套的含有href属性的http地址就可以了

例,这个表达式可以匹配 http,https,ftp,ftps以及IP地址的URL地址。

复制代码 代码如下:

var URL = /(https?://|ftps?://)?((d{1,3}.d{1,3}.d{1,3}.d{1,3})(:[0-9]+)?|([w]+.)(S+)(w{2,4})(:[0-9]+)?)(/?([w#!:.?+=&%@!-/]+))?/ig;

还算是URL地址匹配计较完善的。利用这个表达式我写了两个小函数,将用户留言的URL地址替换成可点击的链接,没有什么太难的,就是利用JavaScript 的 replace() 函数来实现替换 URL 为 link:

复制代码 代码如下:

/**
 * JavaScrit 版本
 * 将URL地址转化为完整的A标签链接代码
 */

var replaceURLToLink = function (text) {
        text = text.replace(URL, function (url) {
            var urlText = url;
            if (!url.match('^https?://')) {
                url = 'http://' + url;
            }
            return '' + urlText + '';
        });

        return text;
    };

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan pautan magnet Cara menggunakan pautan magnet Feb 18, 2024 am 10:02 AM

Pautan magnet ialah kaedah pautan untuk memuat turun sumber, yang lebih mudah dan cekap daripada kaedah muat turun tradisional. Pautan magnet membolehkan anda memuat turun sumber secara peer-to-peer tanpa bergantung pada pelayan perantara. Artikel ini akan memperkenalkan cara menggunakan pautan magnet dan perkara yang perlu diberi perhatian. 1. Apakah pautan magnet? Pautan magnet ialah kaedah muat turun berdasarkan protokol P2P (Peer-to-Peer). Melalui pautan magnet, pengguna boleh menyambung terus kepada penerbit sumber untuk melengkapkan perkongsian dan muat turun sumber. Berbanding dengan kaedah muat turun tradisional, magnet

Bagaimana untuk memuat turun pautan bermula dengan 115://? Muat turun pengenalan kaedah Bagaimana untuk memuat turun pautan bermula dengan 115://? Muat turun pengenalan kaedah Mar 14, 2024 am 11:58 AM

Baru-baru ini, ramai pengguna bertanya kepada editor, bagaimana untuk memuat turun pautan bermula dengan 115://? Jika anda ingin memuat turun pautan bermula dengan 115://, anda perlu menggunakan pelayar 115 Selepas anda memuat turun pelayar 115, mari lihat tutorial muat turun yang disusun oleh editor di bawah. Pengenalan kepada cara memuat turun pautan bermula dengan 115:// 1. Log masuk ke 115.com, muat turun dan pasang pelayar 115. 2. Masukkan: chrome://extensions/ dalam bar alamat pelayar 115, masukkan pusat sambungan, cari Tampermonkey dan pasang pemalam yang sepadan. 3. Masukkan dalam bar alamat pelayar 115: Skrip Grease Monkey: https://greasyfork.org/en/

Bagaimana untuk mendapatkan pautan akaun video WeChat? Bagaimana untuk menambah pautan produk ke akaun video WeChat? Bagaimana untuk mendapatkan pautan akaun video WeChat? Bagaimana untuk menambah pautan produk ke akaun video WeChat? Mar 22, 2024 pm 09:36 PM

Sebagai sebahagian daripada ekosistem WeChat, akaun video WeChat secara beransur-ansur menjadi alat promosi yang penting untuk pencipta kandungan dan pedagang. Mendapatkan pautan ke akaun video pada platform ini adalah penting untuk berkongsi dan menyebarkan kandungan. Berikut akan memperkenalkan secara terperinci cara mendapatkan pautan akaun video WeChat dan cara menambah pautan produk ke akaun video untuk meningkatkan kesan penyebaran kandungan. 1. Bagaimana untuk mendapatkan pautan akaun video WeChat? Selepas menyiarkan video pada akaun video WeChat anda, sistem akan membuat pautan video secara automatik. Penulis boleh menyalin pautan selepas diterbitkan untuk memudahkan perkongsian dan penyebaran. Selepas log masuk ke akaun video WeChat anda, anda boleh menyemak imbas halaman utama akaun video anda. Di halaman utama, setiap video disertakan dengan pautan yang sepadan supaya anda boleh menyalin atau berkongsinya secara langsung. 3. Cari akaun video: Masukkan nama akaun video dalam kotak carian WeChat

Cara menyambungkan Apple Notes pada iPhone dalam sistem iOS 17 terkini Cara menyambungkan Apple Notes pada iPhone dalam sistem iOS 17 terkini Sep 22, 2023 pm 05:01 PM

Pautkan AppleNotes pada iPhone menggunakan ciri Tambah Pautan. Nota: Anda hanya boleh membuat pautan antara Apple Notes pada iPhone jika anda telah memasang iOS17. Buka apl Nota pada iPhone anda. Sekarang, buka nota di mana anda ingin menambah pautan. Anda juga boleh memilih untuk membuat nota baharu. Klik di mana-mana sahaja pada skrin. Ini akan menunjukkan menu kepada anda. Klik anak panah di sebelah kanan untuk melihat pilihan "Tambah pautan". Klik padanya. Kini anda boleh menaip nama nota atau URL halaman web. Kemudian, klik Selesai di penjuru kanan sebelah atas dan pautan yang ditambahkan akan muncul dalam nota. Jika anda ingin menambah pautan pada perkataan, klik dua kali perkataan untuk memilihnya, pilih "Tambah Pautan" dan tekan

Apakah keperluan untuk pautan video? Bagaimana untuk memautkan akaun video dengan barangan? Apakah keperluan untuk pautan video? Bagaimana untuk memautkan akaun video dengan barangan? Mar 07, 2024 pm 01:13 PM

Dengan populariti platform video pendek, semakin ramai pencipta mula menggunakan akaun video untuk mencipta dan mempromosikan kandungan. Akaun video bukan sahaja boleh mempamerkan bakat peribadi, tetapi juga merealisasikan pengewangan komersial melalui pautan produk. Walau bagaimanapun, untuk menambah pautan ke akaun video, syarat tertentu mesti dipenuhi. 1. Apakah keperluan untuk pautan video? Pengesahan akaun video adalah prasyarat untuk menambah pautan ke akaun video anda. Pada masa ini, platform video pendek utama seperti Douyin dan Kuaishou menyediakan perkhidmatan pensijilan, yang terutamanya merangkumi dua jenis: pensijilan peribadi dan pensijilan institusi. Pensijilan peribadi memerlukan penyerahan maklumat identiti sebenar, manakala pensijilan institusi memerlukan penyediaan bahan pensijilan daripada syarikat atau organisasi yang berkaitan. Selepas melengkapkan pengesahan, pengguna boleh menambah pautan ke akaun video mereka untuk meningkatkan kredibiliti dan kewibawaan akaun mereka. Salah satu pautan video

Pengenalan fungsi PHP—get_headers(): Dapatkan maklumat pengepala respons URL Pengenalan fungsi PHP—get_headers(): Dapatkan maklumat pengepala respons URL Jul 25, 2023 am 09:05 AM

Pengenalan fungsi PHP—get_headers(): Gambaran keseluruhan mendapatkan maklumat pengepala respons URL: Dalam pembangunan PHP, kita selalunya perlu mendapatkan maklumat pengepala respons halaman web atau sumber jauh. Fungsi PHP get_headers() boleh dengan mudah mendapatkan maklumat pengepala respons URL sasaran dan mengembalikannya dalam bentuk tatasusunan. Artikel ini akan memperkenalkan penggunaan fungsi get_headers() dan menyediakan beberapa contoh kod yang berkaitan. Penggunaan fungsi get_headers(): get_header

Bagaimana untuk menghentikan Outlook daripada membuka pautan dalam pelayar Edge Bagaimana untuk menghentikan Outlook daripada membuka pautan dalam pelayar Edge Aug 03, 2023 am 11:49 AM

Cara Menghentikan Outlook daripada Membuka Pautan di Edge Sebelum meneruskan, pastikan penyemak imbas pilihan anda ditetapkan sebagai penyemak imbas lalai dalam Windows. Ini memastikan pautan Outlook dibuka dalam penyemak imbas yang dikehendaki. Untuk menyemak dan menetapkan penyemak imbas lalai anda: Untuk Windows 10: Klik menu Mula dan pilih Tetapan Pergi ke Apl dan kemudian Apl Lalai Cari "Pelayar Web" di bahagian bawah senarai apl lalai ” Jika penyemak imbas pilihan anda disenaraikan, anda sudah sedia. Jika Microsoft Edge disenaraikan, klik padanya dan pilih penyemak imbas pilihan anda daripada senarai. Jika digesa, klik Tukar Bagaimanapun. Betulkan isu Edge

Bagaimana untuk mendapatkan ID Steam anda dalam beberapa langkah? Bagaimana untuk mendapatkan ID Steam anda dalam beberapa langkah? May 08, 2023 pm 11:43 PM

Pada masa kini, ramai pengguna Windows yang suka permainan telah memasuki klien Steam dan boleh mencari, memuat turun dan bermain mana-mana permainan yang bagus. Walau bagaimanapun, kebanyakan profil pengguna mungkin mempunyai nama yang sama, menjadikannya sukar untuk mencari profil atau memautkan profil Steam ke akaun pihak ketiga yang lain atau menyertai forum Steam untuk berkongsi kandungan. Profil tersebut diberikan id 17 digit yang unik, yang kekal sama dan tidak boleh ditukar oleh pengguna pada bila-bila masa, manakala nama pengguna atau URL tersuai boleh. Walau apa pun, sesetengah pengguna tidak mengetahui Steamid mereka, dan penting untuk mengetahui perkara ini. Jangan panik jika anda juga tidak tahu cara mencari Steamid akaun anda. Dalam artikel ini

See all articles