จะแทนที่ URL ธรรมดาด้วยลิงค์ได้อย่างไร

ฉันใช้ฟังก์ชันด้านล่างเพื่อจับคู่ URL ภายในข้อความที่กำหนดและแทนที่เป็นลิงก์ HTML นิพจน์ทั่วไปใช้งานได้ดี แต่ขณะนี้ฉันเปลี่ยนเฉพาะนัดแรกเท่านั้น

ฉันจะแทนที่ URL ทั้งหมดได้อย่างไร ฉันเดาว่าฉันควรจะใช้คำสั่งexecแต่ฉันไม่ได้คิดวิธีการทำ

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

ออกก่อนกลิ้ง regexp ของคุณเองไปยัง URL แยกเป็นความคิดที่น่ากลัว คุณต้องคิดนี้เป็นปัญหาที่พบบ่อยพอที่จะมีคนเขียน, บั๊กและทดสอบห้องสมุดให้มันเป็นไปตามRFCs URI ที่มีความซับซ้อน - ตรวจสอบสำหรับการแยก URL ใน Node.jsและหน้าวิกิพีเดียในรูปแบบ URI

มีกรณีขอบจำนวนมากเมื่อพูดถึงการแยก URL: ชื่อโดเมนสากล , จริง ( .museum) และไม่มีอยู่ ( .etc) TLDs, เครื่องหมายวรรคตอนแปลกรวมถึงวงเล็บ , เครื่องหมายวรรคตอนท้าย URL, ชื่อโฮสต์ IPV6 เป็นต้น

ฉันมองไปที่ตันของห้องสมุดและมีมูลค่าไม่กี่ใช้แม้จะมีข้อเสียบางอย่าง

• linkifyของ Soapbox ได้เห็นความพยายามอย่างจริงจังและผู้ปรับโครงสร้างรายใหญ่ในเดือนมิถุนายน 2558 ได้ นำการพึ่งพา jQueryออก มันก็ยังมีปัญหาเกี่ยวกับ IDNs
• AnchorMeเป็นผู้มาใหม่ที่อ้างว่าเร็วขึ้นและผอมลง ปัญหา IDNบางอย่างเช่นกัน
• รายการAutolinker.jsมีคุณสมบัติพิเศษอย่างมาก (เช่น"จะจัดการอินพุต HTML ได้อย่างถูกต้องยูทิลิตี้จะไม่เปลี่ยนhrefแอตทริบิวต์ภายในแท็ก anchor ()" ) ฉันจะโยนทดสอบบางอย่างที่มันเมื่อมีการสาธิตจะกลายเป็นใช้ได้

ห้องสมุดที่ฉันขาดคุณสมบัติอย่างรวดเร็วสำหรับงานนี้:

• urlize ของ Django ไม่ได้จัดการ TLDs บางอย่างถูกต้อง (ที่นี่อย่างเป็นทางการของรายการ TLDs ที่ถูกต้อง . ไม่มีการสาธิต
• autolink-jsจะไม่ตรวจพบ "www.google.com" โดยไม่มี http: // ดังนั้นจึงไม่เหมาะสำหรับการค้นหา "URL ชั่วคราว" (ไม่ต้องมีรูปแบบ / โปรโตคอล) โดยอัตโนมัติในข้อความธรรมดา
• linkify ของ Ben Almanยังไม่ได้รับการบำรุงรักษาตั้งแต่ปี 2009

หากคุณยืนยันในการแสดงออกปกติที่ครอบคลุมมากที่สุดคือURL regexp จากตัวแทนแม้ว่ามันจะตรวจจับเท็จ TLDs สองตัวอักษรที่ไม่มีอยู่จริงโดยดูที่มัน

การแทนที่ URL ด้วยลิงก์ (ตอบปัญหาทั่วไป)

การแสดงออกปกติในคำถามคิดถึงกรณีขอบจำนวนมาก เมื่อตรวจสอบ URL จะดีกว่าเสมอหากใช้ไลบรารีเฉพาะที่จัดการชื่อโดเมนต่างประเทศ TLD ใหม่เช่น.museumวงเล็บและเครื่องหมายวรรคตอนอื่น ๆ ภายในและท้าย URL และกรณีขอบอื่น ๆ ดูโพสต์บล็อกของ Jeff Atwood ปัญหากับ URLสำหรับคำอธิบายของปัญหาอื่น ๆ

สรุปที่ดีที่สุดของ URL ห้องสมุดการจับคู่อยู่ในคำตอบของแดนดาสคเลสุ
( ณ กุมภาพันธ์ 2014)

"สร้างนิพจน์ทั่วไปแทนที่การแข่งขันมากกว่าหนึ่งรายการ" (ตอบปัญหาเฉพาะ)

เพิ่ม "g" ที่ท้ายนิพจน์ทั่วไปเพื่อเปิดใช้งานการจับคู่แบบโกลบอล:

/ig;

แต่นั่นจะแก้ไขปัญหาในคำถามที่นิพจน์ทั่วไปแทนที่การจับคู่แรกเท่านั้น อย่าใช้รหัสนั้น

ฉันได้ทำการปรับเปลี่ยนเล็กน้อยสำหรับรหัสของ Travis (เพื่อหลีกเลี่ยงการเผยแพร่ซ้ำที่ไม่จำเป็น - แต่มันทำงานได้ดีสำหรับความต้องการของฉันงานดีมาก!):

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText;
}

ทำการเพิ่มประสิทธิภาพบางอย่างกับLinkify()รหัสของเทรวิสข้างต้น ฉันยังแก้ไขข้อบกพร่องที่ที่อยู่อีเมลที่มีรูปแบบประเภทโดเมนย่อยจะไม่ถูกจับคู่ (เช่น example@domain.co.uk)

นอกจากนี้ฉันเปลี่ยนการใช้งานเป็นต้นแบบของStringคลาสเพื่อให้สามารถจับคู่รายการดังนี้:

var text = 'address@example.com';
text.linkify();

'http://stackoverflow.com/'.linkify();

อย่างไรก็ตามนี่คือสคริปต์:

if(!String.linkify) {
    String.prototype.linkify = function() {

        // http://, https://, ftp://
        var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

        // www. sans http:// or https://
        var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

        // Email addresses
        var emailAddressPattern = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;

        return this
            .replace(urlPattern, '<a href="$&">$&</a>')
            .replace(pseudoUrlPattern, '$1<a href="http://$2">$2</a>')
            .replace(emailAddressPattern, '<a href="mailto:$&">$&</a>');
    };
}

ขอบคุณสิ่งนี้มีประโยชน์มาก ฉันต้องการสิ่งที่จะเชื่อมโยงสิ่งต่าง ๆ ที่ดูเหมือน URL - เป็นข้อกำหนดพื้นฐานมันจะเชื่อมโยงบางอย่างเช่น www.yahoo.com แม้ว่าจะไม่มีคำนำหน้าโปรโตคอล http: // โดยพื้นฐานแล้วถ้า "www." มีอยู่แล้วมันจะเชื่อมโยงและถือว่าเป็น http: // ฉันต้องการให้อีเมลเปลี่ยนเป็น mailto: ลิงก์ด้วย ตัวอย่าง: www.yahoo.com จะถูกแปลงเป็น www.yahoo.com

นี่คือรหัสที่ฉันได้รับ (ด้วยการรวมกันของรหัสจากหน้านี้และสิ่งอื่น ๆ ที่ฉันพบออนไลน์และสิ่งอื่น ๆ ที่ฉันทำด้วยตัวเอง):

function Linkify(inputText) {
    //URLs starting with http://, https://, or ftp://
    var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    var replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with www. (without // before it, or it'd re-link the ones done above)
    var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    var replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links
    var replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
    var replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText
}

ในการแทนที่ครั้งที่ 2 ส่วน (^ | [^ /]) จะแทนที่ www.whething.com เท่านั้นหากยังไม่ได้ใส่คำนำหน้าด้วย // - เพื่อหลีกเลี่ยงการเชื่อมโยงสองครั้งหาก URL นั้นถูกเชื่อมโยงในการแทนที่ครั้งแรกแล้ว นอกจากนี้ยังเป็นไปได้ว่า www.whever.com อาจอยู่ที่จุดเริ่มต้นของสตริงซึ่งเป็นเงื่อนไข "หรือ" แรกในส่วนของ regex

สิ่งนี้สามารถรวมเป็นปลั๊กอิน jQuery ตามที่ Jesse P แสดงไว้ด้านบน - แต่ฉันต้องการฟังก์ชั่นปกติที่ไม่ได้ทำหน้าที่องค์ประกอบ DOM ที่มีอยู่เพราะฉันรับข้อความที่ฉันมีแล้วเพิ่มลงใน DOM และ ฉันต้องการให้ข้อความเป็น "linkified" ก่อนที่จะเพิ่มดังนั้นฉันจึงส่งข้อความผ่านฟังก์ชั่นนี้ ใช้งานได้ดี

การระบุ URL นั้นยุ่งยากเนื่องจากมักถูกล้อมรอบด้วยเครื่องหมายวรรคตอนและเนื่องจากผู้ใช้มักไม่ใช้ URL แบบเต็มรูปแบบ มีฟังก์ชัน JavaScript จำนวนมากสำหรับการแทนที่ URL ด้วยการเชื่อมโยงหลายมิติ แต่ฉันไม่พบฟังก์ชันที่ทำงานได้ดีรวมถึงurlizeตัวกรองใน Django ที่ใช้เฟรมเวิร์กบน Python ดังนั้นฉันจึงเปลี่ยนurlizeฟังก์ชั่นของ Django เป็นJavaScript:

https://github.com/ljosa/urlize.js

ตัวอย่าง:

urlize('Go to SO (stackoverflow.com) and ask. <grin>', 
       {nofollow: true, autoescape: true})
=> "Go to SO (<a href="http://stackoverflow.com" rel="nofollow">stackoverflow.com</a>) and ask. &lt;grin&gt;"

อาร์กิวเมนต์ที่สองหากเป็นจริงrel="nofollow"จะทำให้เกิดการแทรก อาร์กิวเมนต์ที่สามถ้าเป็นจริงจะหนีอักขระที่มีความหมายพิเศษใน HTML ดูแฟ้ม Readme

ฉันเปลี่ยน Roshambo String.linkify () เป็น emailAddressPattern เพื่อให้รู้จัก aaa.bbb. @ ที่อยู่ ccc.ddd

if(!String.linkify) {
    String.prototype.linkify = function() {

        // http://, https://, ftp://
        var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

        // www. sans http:// or https://
        var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

        // Email addresses *** here I've changed the expression ***
        var emailAddressPattern = /(([a-zA-Z0-9_\-\.]+)@[a-zA-Z_]+?(?:\.[a-zA-Z]{2,6}))+/gim;

        return this
            .replace(urlPattern, '<a target="_blank" href="$&">$&</a>')
            .replace(pseudoUrlPattern, '$1<a target="_blank" href="http://$2">$2</a>')
            .replace(emailAddressPattern, '<a target="_blank" href="mailto:$1">$1</a>');
    };
}

ฉันค้นหาใน google เพื่อหาสิ่งใหม่และวิ่งข้ามอันนี้:

$('p').each(function(){
   $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') );
});

ตัวอย่าง: http://jsfiddle.net/kachibito/hEgvc/1/

ทำงานได้ดีจริงๆสำหรับลิงก์ปกติ

สคริปต์ที่ดีที่สุดในการทำเช่นนี้: http://benalman.com/projects/javascript-linkify-process-lin/

โซลูชันนี้ใช้งานได้เหมือนคนอื่น ๆ และในความเป็นจริงจะใช้ regex เดียวกับหนึ่งในนั้น แต่ในทางกลับกันสตริง HTML จะส่งคืนชิ้นส่วนเอกสารที่มีองค์ประกอบ A และโหนดข้อความใด ๆ ที่เกี่ยวข้อง

 function make_link(string) {
    var words = string.split(' '),
        ret = document.createDocumentFragment();
    for (var i = 0, l = words.length; i < l; i++) {
        if (words[i].match(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi)) {
            var elm = document.createElement('a');
            elm.href = words[i];
            elm.textContent = words[i];
            if (ret.childNodes.length > 0) {
                ret.lastChild.textContent += ' ';
            }
            ret.appendChild(elm);
        } else {
            if (ret.lastChild && ret.lastChild.nodeType === 3) {
                ret.lastChild.textContent += ' ' + words[i];
            } else {
                ret.appendChild(document.createTextNode(' ' + words[i]));
            }
        }
    }
    return ret;
}

มีข้อควรระวังบางประการเช่น IE ที่เก่ากว่าและการสนับสนุน textContent

นี่คือตัวอย่าง

หากคุณต้องการแสดงลิงค์ที่สั้นกว่า (เฉพาะโดเมน) แต่มี URL ที่ยาวเหมือนกันคุณสามารถลองแก้ไขโค้ดของ Sam Hasler ที่โพสต์ไว้ด้านบน

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp, "<a href='$1' target='_blank'>$3</a>");
}

Reg อดีต: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]*)/ig

function UriphiMe(text) {
      var exp = /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]*)/ig; 
      return text.replace(exp,"<a href='$1'>$1</a>");
}

ด้านล่างนี้เป็นสตริงที่ทดสอบ:

1. พบกับฉันได้ที่ www.google.com
2. www
3. หาฉันที่ www http://www.com
4. ติดตามฉันได้ที่: http://www.nishantwork.wordpress.com
5. http://www.nishantwork.wordpress.com
6. ติดตามฉันได้ที่: http://www.nishantwork.wordpress.com
7. https://stackoverflow.com/users/430803/nishant

หมายเหตุ: หากคุณไม่ต้องการผ่านwwwอย่างถูกต้องให้ใช้ด้านล่าง reg ex: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig

คำเตือนเกี่ยวกับความซับซ้อนของ URI นั้นควรได้รับการจดบันทึก แต่คำตอบง่ายๆสำหรับคำถามของคุณคือ:
ในการแทนที่การแข่งขันทุกครั้งคุณต้องเพิ่มการ/gตั้งค่าสถานะที่ส่วนท้ายของ RegEx:
/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

/**
 * Convert URLs in a string to anchor buttons
 * @param {!string} string
 * @returns {!string}
 */

function URLify(string){
  var urls = string.match(/(((ftp|https?):\/\/)[\-\w@:%_\+.~#?,&\/\/=]+)/g);
  if (urls) {
    urls.forEach(function (url) {
      string = string.replace(url, '<a target="_blank" href="' + url + '">' + url + "</a>");
    });
  }
  return string.replace("(", "<br/>(");
}

ตัวอย่างง่ายๆ

ง่าย ๆ เข้าไว้! พูดในสิ่งที่คุณไม่สามารถทำได้แทนที่จะเป็นอะไรก็ได้ :)

ดังที่ได้กล่าวมาแล้ว URL สามารถค่อนข้างซับซ้อนโดยเฉพาะอย่างยิ่งหลังจาก '?' และไม่ใช่ทั้งหมดเริ่มต้นด้วย 'www' เช่นmaps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

ดังนั้นแทนที่จะมี regex ที่ซับซ้อนที่จะไม่เจอเคสขอบทั้งหมดและจะยากที่จะรักษาวิธีนี้ง่ายกว่ามากซึ่งใช้งานได้ดีสำหรับฉันในทางปฏิบัติ

การจับคู่

http(s):// (anything but a space)+

www. (anything but a space)+

โดยที่ 'อะไรก็ได้' คือ[^'"<>\s] ... โดยทั่วไปเป็นการจับคู่ที่โลภจับคุณไปพบกับพื้นที่พูดคำพูดวงเล็บมุมหรือจุดสิ้นสุดของบรรทัด

นอกจากนี้:

อย่าลืมตรวจสอบว่ามันไม่ได้อยู่ในรูปแบบ URL เช่นข้อความมีhref="..."หรือsrc="..."

เพิ่ม ref = nofollow (ถ้าเหมาะสม)

วิธีแก้ปัญหานี้ไม่ได้ "ดี" ตามที่กล่าวไว้ข้างต้น แต่ง่ายกว่ามากและใช้งานได้ดีในทางปฏิบัติ

if html.match( /(href)|(src)/i )) {
    return html; // text already has a hyper link in it
    }

html = html.replace( 
            /\b(https?:\/\/[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='$1'>$1</a>" 
            );

html = html.replace( 
            /\s(www\.[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='http://$1'>$1</a>" 
            );

html = html.replace( 
             /^(www\.[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='http://$1'>$1</a>" 
            );

return html;

การตรวจสอบ URL ที่ถูกต้องด้วยโดเมนระหว่างประเทศและการรองรับตัวอักษรแบบดาวไม่ใช่สิ่งเล็กน้อย linkify-itLibrary สร้าง regex จากหลายเงื่อนไขและขนาดสุดท้ายคือประมาณ 6 กิโลไบต์ :) มันแม่นยำมากกว่า libs ทั้งหมดซึ่งอ้างอิงในคำตอบที่ยอมรับ

ดูการสาธิต linkify-itเพื่อตรวจสอบเคสสุดสดและทดสอบเคสของคุณ

หากคุณต้องการเชื่อมโยงแหล่งที่มาของ HTML คุณควรแยกมันก่อนแล้ววนซ้ำแต่ละโทเค็นข้อความแยกต่างหาก

ฉันได้เขียนไลบรารี JavaScript อีกชุดหนึ่งแล้วมันอาจจะดีกว่าสำหรับคุณเนื่องจากมีความอ่อนไหวมากกับผลบวกปลอมที่เป็นไปได้น้อยที่สุดรวดเร็วและขนาดเล็ก ฉันกำลังทำการบำรุงรักษาอยู่ในขณะนี้ดังนั้นโปรดทดสอบในหน้าสาธิตและดูว่ามันจะทำงานอย่างไรสำหรับคุณ

ลิงก์: https://github.com/alexcorvi/anchorme.js

ฉันต้องทำในสิ่งที่ตรงกันข้ามและสร้างลิงก์ html เป็นเพียง URL แต่ฉันได้แก้ไข regex ของคุณและใช้งานได้อย่างมีเสน่ห์ขอบคุณ :)

var exp = /<a\s.*href= [ดีกว่า "\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ & ทาง: ด้าน & = & nbsp; |:...;] * [- A-Z0-9 + & @ # \ /% = ~ _ |]) [ "] *> * <\ / a> / ig;

source = source.replace (exp, "$ 1");

การตรวจจับอีเมลในคำตอบของ Travitron ด้านบนไม่ได้ผลสำหรับฉันดังนั้นฉันจึงขยาย / แทนที่ด้วยรหัสต่อไปนี้ (C #)

// Change e-mail addresses to mailto: links.
const RegexOptions o = RegexOptions.Multiline | RegexOptions.IgnoreCase;
const string pat3 = @"([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,6})";
const string rep3 = @"<a href=""mailto:$1@$2.$3"">$1@$2.$3</a>";
text = Regex.Replace(text, pat3, rep3, o);

สิ่งนี้ทำให้ที่อยู่อีเมลเช่น " firstname.secondname@one.two.three.co.uk "

หลังจากป้อนข้อมูลจากหลาย ๆ แหล่งฉันได้วิธีการแก้ปัญหาที่ทำงานได้ดี มันเกี่ยวข้องกับการเขียนรหัสการแทนที่ของคุณเอง

คำตอบ

ซอ

function replaceURLWithHTMLLinks(text) {
    var re = /(\(.*?)?\b((?:https?|ftp|file):\/\/[-a-z0-9+&@#\/%?=~_()|!:,.;]*[-a-z0-9+&@#\/%=~_()|])/ig;
    return text.replace(re, function(match, lParens, url) {
        var rParens = '';
        lParens = lParens || '';

        // Try to strip the same number of right parens from url
        // as there are left parens.  Here, lParenCounter must be
        // a RegExp object.  You cannot use a literal
        //     while (/\(/g.exec(lParens)) { ... }
        // because an object is needed to store the lastIndex state.
        var lParenCounter = /\(/g;
        while (lParenCounter.exec(lParens)) {
            var m;
            // We want m[1] to be greedy, unless a period precedes the
            // right parenthesis.  These tests cannot be simplified as
            //     /(.*)(\.?\).*)/.exec(url)
            // because if (.*) is greedy then \.? never gets a chance.
            if (m = /(.*)(\.\).*)/.exec(url) ||
                    /(.*)(\).*)/.exec(url)) {
                url = m[1];
                rParens = m[2] + rParens;
            }
        }
        return lParens + "<a href='" + url + "'>" + url + "</a>" + rParens;
    });
}

แทนที่ URL ในข้อความด้วยลิงค์ HTML ละเว้น URL ในแท็ก href / pre https://github.com/JimLiu/auto-link

นี่คือทางออกของฉัน:

var content = "Visit https://wwww.google.com or watch this video: https://www.youtube.com/watch?v=0T4DQYgsazo and news at http://www.bbc.com";
content = replaceUrlsWithLinks(content, "http://");
content = replaceUrlsWithLinks(content, "https://");

function replaceUrlsWithLinks(content, protocol) {
    var startPos = 0;
    var s = 0;

    while (s < content.length) {
        startPos = content.indexOf(protocol, s);

        if (startPos < 0)
            return content;

        let endPos = content.indexOf(" ", startPos + 1);

        if (endPos < 0)
            endPos = content.length;

        let url = content.substr(startPos, endPos - startPos);

        if (url.endsWith(".") || url.endsWith("?") || url.endsWith(",")) {
            url = url.substr(0, url.length - 1);
            endPos--;
        }

        if (ROOTNS.utils.stringsHelper.validUrl(url)) {
            let link = "<a href='" + url + "'>" + url + "</a>";
            content = content.substr(0, startPos) + link + content.substr(endPos);
            s = startPos + link.length;
        } else {
            s = endPos + 1;
        }
    }

    return content;
}

function validUrl(url) {
    try {
        new URL(url);
        return true;
    } catch (e) {
        return false;
    }
}

ลองฟังก์ชั่นด้านล่าง:

function anchorify(text){
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  var text1=text.replace(exp, "<a href='$1'>$1</a>");
  var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
  return text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
}

alert(anchorify("Hola amigo! https://www.sharda.ac.in/academics/"));

ลองวิธีแก้ปัญหาด้านล่าง

function replaceLinkClickableLink(url = '') {
let pattern = new RegExp('^(https?:\\/\\/)?'+
        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+
        '((\\d{1,3}\\.){3}\\d{1,3}))'+
        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+
        '(\\?[;&a-z\\d%_.~+=-]*)?'+
        '(\\#[-a-z\\d_]*)?$','i');

let isUrl = pattern.test(url);
if (isUrl) {
    return `<a href="${url}" target="_blank">${url}</a>`;
}
return url;
}