लिंक के साथ सादे URL कैसे बदलें?


454

मैं किसी दिए गए पाठ के अंदर URL से मिलान करने के लिए नीचे दिए गए फ़ंक्शन का उपयोग कर रहा हूं और उन्हें HTML लिंक के लिए प्रतिस्थापित कर रहा हूं। नियमित अभिव्यक्ति शानदार काम कर रही है, लेकिन वर्तमान में मैं केवल पहले मैच की जगह ले रहा हूं।

मैं सभी URL को कैसे बदल सकता हूं? मुझे लगता है कि मुझे निष्पादन कमांड का उपयोग करना चाहिए , लेकिन मुझे वास्तव में यह नहीं पता था कि यह कैसे करना है।

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>"); 
}

जवाबों:


351

सबसे पहले, URL को पार्स करने के लिए अपने स्वयं के regexp को रोल करना एक भयानक विचार हैRFCs के अनुसार, आपको यह कल्पना करना चाहिए कि यह एक सामान्य समस्या है, जिसे किसी ने लिखा है, बहस की है और इसके लिए पुस्तकालय का परीक्षण किया है । यूआरआई जटिल हैं - यूआरआई योजनाओं पर Node.js में URL पार्सिंग और विकिपीडिया पृष्ठ के लिए कोड देखें

जब यूआरएल को पार्स करने की बात आती है तो एक टन के किनारे के मामले होते हैं: अंतर्राष्ट्रीय डोमेन नाम , वास्तविक ( .museum) बनाम कोई नहीं ( .etc) टीएलडी, कोष्ठक सहित अजीब विराम चिह्न , URL के अंत में विराम चिह्न, आईपीवीएस होस्टनाम आदि।

मैंने पुस्तकालयों के एक टन को देखा है , और कुछ डाउनसाइड के बावजूद उपयोग करने लायक कुछ हैं:

वे पुस्तकालय जिन्हें मैंने इस कार्य के लिए जल्दी से अयोग्य घोषित कर दिया है:

यदि आप एक नियमित अभिव्यक्ति पर जोर देते हैं, तो सबसे व्यापक है कंपोनेंट से URL रीजैक्सप , हालांकि यह कुछ गैर-मौजूद दो-अक्षर वाले TLDs को देखकर गलत तरीके से पता लगाएगा।


3
यह अफ़सोस की URL regexp from Componentबात नहीं है, यह क्या कर रहा है की कुछ व्याख्या उपयोगी होगा। Autolinker.jsबहुत अच्छी तरह से टिप्पणी की है और परीक्षण किया है। urlize.jsपुस्तकालय में से जुड़ा हुआ Vebjorn Ljosa का जवाब भी featureful और अच्छी तरह से बनाए लग रहा है, हालांकि यह परीक्षण नहीं है।
सैम हसलर

1
Regex101.com स्वचालित रूप से regexp को "समझाता है" , लेकिन इसके साथ शुभकामनाएं :) मुझे अवैध TLD (उसी लिंक) के साथ विफलता का मामला भी जल्दी मिल गया है।
डैन डैस्कलेस्क्यू

1
@ शेमसलर: ऑटोलिंकर को TLDs और IDNs क्षेत्र में सुधार करने की आवश्यकता है। कुछ परीक्षण जोड़े
डैन डस्केल्सस्कु

2
जिज्ञासु कि किसी ने भी यूआरएल रेगेक्स पैटर्न को बनाए रखने में जॉन ग्रुबर के प्रयासों का उल्लेख नहीं किया है । यह समस्या का एकमात्र / आदर्श समाधान नहीं है, लेकिन जांच के लायक किसी भी मामले में, यदि आप अपना स्वयं का समाधान रोल कर रहे हैं। बस इसे एक संदर्भ के रूप में जोड़ना चाहते थे।
oelna

2
@DanDascalescu इस markdown-it.github.io/linkify-it पर एक नज़र डालें । यह लाइब्रेरी ठीक एक काम पर केंद्रित है - पाठ में लिंक पैटर्न का पता लगाना। लेकिन मुझे उम्मीद है, यह इसे अच्छी तरह से करता है। उदाहरण के लिए, इसमें सूक्ष्म यूनिकोड सहित सही यूनिकोड समर्थन है। और यह अंतर्राष्ट्रीय TLD का समर्थन करता है।
विटाली

285

लिंक के साथ URL बदलना (सामान्य समस्या का उत्तर)

प्रश्न में नियमित अभिव्यक्ति बहुत सारे किनारे के मामलों को याद करती है । URL का पता लगाते समय, किसी विशेष लाइब्रेरी का उपयोग करना हमेशा बेहतर होता है जो अंतरराष्ट्रीय डोमेन नाम, नए TLDs .museum, कोष्ठक और अन्य विराम चिह्नों को URL के अंत में और कई अन्य एज मामलों को हैंडल करता है । जेफ एटवुड के ब्लॉग पोस्ट को कुछ अन्य मुद्दों की व्याख्या के लिए यूआरएल के साथ समस्या

यूआरएल मिलान पुस्तकालयों में से सबसे अच्छा सारांश में है डैन डैस्केलेस्कु के जवाब+100
(फरवरी 2014 को)


"एक नियमित अभिव्यक्ति को एक से अधिक मैचों में बदलें" (विशिष्ट समस्या का उत्तर)

वैश्विक मिलान को सक्षम करने के लिए नियमित अभिव्यक्ति के अंत में एक "जी" जोड़ें:

/ig;

लेकिन यह केवल उस समस्या को हल करता है जहां नियमित अभिव्यक्ति केवल पहले मैच की जगह ले रही थी। उस कोड का उपयोग न करें।


150

मैंने ट्रैविस कोड के लिए कुछ छोटे संशोधन किए हैं (बस किसी भी अनावश्यक पुनर्वितरण से बचने के लिए - लेकिन यह मेरी जरूरतों के लिए बहुत अच्छा काम कर रहा है!)

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

1
एम्बेडेड ऑब्जेक्ट्स और iframes को नुकसान न पहुँचाने के लिए इस कोड को कैसे संपादित करें .. (यूट्यूब एम्बेडेड ऑब्जेक्ट्स और iframes)
प्रद्युम्न भट्टाचार्य 20

5
कोड में एक बग है जो यहां ईमेल पते से मेल खाता है। अधिक जटिल डोमेन नाम, यानी email@example.co.uk से मेल खाने [a-zA-Z]{2,6}के लिए कुछ लाइनों के साथ पढ़ना चाहिए (?:[a-zA-Z]{2,6})+
रोशाम्बो

1
मैंने कुछ समस्याओं में भाग लिया है; सबसे पहले http: // या http: // www (बिना स्पेस www यहां तक ​​कि एसओ इस गलत तरीके से पार्स करता है) एक लिंक बनाएगा। और http: // www के साथ लिंक। डोमेन । com (रिक्त स्थान के बिना) एक खाली लिंक बनाएगा और फिर href क्षेत्र में संलग्न एंकर क्लोजिंग टैग के साथ एक।
अल्फ्रेड

1
क्या बिना URL के बारे में http://या www? क्या यह उन तरह के URL के लिए काम करेगा?
नाथन

2
मैंने मेलआउट समस्या को ठीक करने के लिए मूल पोस्ट को संपादित करने की कोशिश की, लेकिन मुझे संपादन करने के लिए कम से कम 6 अक्षर जोड़ने होंगे। लेकिन अगर आप इस लाइन को बदलते हैं: इसके replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;साथ replacePattern3 = /(\w+@[a-zA-Z_]+?(\.[a-zA-Z]{2,6})+)/gim;जो
मेल्टो

70

ट्रैविस 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>');
    };
}

मेरी राय में सबसे अच्छा, क्योंकि प्रोटोटाइप फ़ंक्शंस चीजों को बहुत अधिक क्लीनर बनाते हैं :)
MRVDOG

ऐसा लगता है कि यह इस तरह के ईमेल पते के साथ काम नहीं करता है: info@some-thing.com some.thing@example.com आदि ..
मार्को

@MarcoGagliardi अच्छी पकड़। फिक्स्ड।
रोशाम्बो

1
यह स्ट्रिंग "git clone aaaa@bitbucket.org/ooo/bbb-cc-dd.it " के लिए काम नहीं करता है । इसने स्ट्रिंग को विखंडू में तोड़ दिया और इस तरह के कई एंकर बनाए "git clone <a href="https://<a href="mailto:aaaa@bitbucket.org"> aaaa@bitbucket.org </a> / ooo / bbb-cc-dd.git "> https: // <a href="mailto:aaaa@bitbucket.org"> aaaa@bitbucket.org </a>/ooo/bbb-cc-dd.git </a> ”
जेबिन

1
यह +ईमेल उपयोगकर्ता नाम के साथ काम नहीं करता है , जैसे कि foo+bar@domain.com। मैंने इसे ईमेल पैटर्न के साथ तय किया /[\w.+]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim( +पहले कोष्ठक में ध्यान दें ), लेकिन मुझे नहीं पता कि क्या कुछ और टूटता है।
6

24

धन्यवाद, यह बहुत मददगार था। मुझे कुछ ऐसा भी चाहिए था जो एक यूआरएल की तरह दिखने वाली चीजों को जोड़ देगा - एक बुनियादी आवश्यकता के रूप में, यह www.yahoo.com की तरह कुछ लिंक करेगा, भले ही http: // प्रोटोकॉल उपसर्ग मौजूद नहीं था। तो मूल रूप से, अगर "www।" मौजूद है, इसे लिंक करेंगे और मान लेंगे कि यह http: // है। मुझे ईमेल भी मेल्टो: लिंक में बदलना चाहते थे। उदाहरण: 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.whatever.com को रिप्लेस कर रहा है, अगर यह पहले से // से उपसर्ग नहीं है, तो - डबल लिंकिंग से बचने के लिए यदि कोई URL पहले से ही लिंक किया गया था। इसके अलावा, यह संभव है कि www.whatever.com स्ट्रिंग की शुरुआत में हो सकता है, जो कि रेगेक्स के उस हिस्से में पहली "या" स्थिति है।

इसे एक jQuery प्लगइन के रूप में एकीकृत किया जा सकता है जैसा कि जेसी पी ने ऊपर वर्णित किया है - लेकिन मैं विशेष रूप से एक नियमित फ़ंक्शन चाहता था जो किसी मौजूदा DOM तत्व पर कार्य नहीं कर रहा था, क्योंकि मैं जो पाठ ले रहा हूं, वह है और फिर इसे DOM में जोड़ रहा हूं, और मैं चाहता हूं कि पाठ को जोड़ने से पहले "लिंक किया गया" हो, इसलिए मैं इस फ़ंक्शन के माध्यम से पाठ को पास करता हूं। बहुत अच्छा काम करता है।


1
2 के पैटर्न के साथ एक समस्या है, जो सभी के द्वारा सादे "www.domain.com" से मेल खाती है। समस्या तब होती है जब url में किसी प्रकार का रेफ़र होता है, जैसे: & स्थान = http% 3A% 2F% 2Fwww.amazon.com% 2FNeil-Young% 2Fe% 2FB000APYJWA 3Fqid% 3D1280679945% 26sr% 3D8-2-ent & tra =c0c7 -20 और लिंककोड = ur2 और शिविर = 1789 और रचनात्मक = 9325 - जिस स्थिति में लिंक ऑटो फिर से जुड़ा हुआ है। एक त्वरित फिक्स "/" शामिल की गई नकारात्मक सूची के बाद चरित्र "एफ" को जोड़ना है। तो अभिव्यक्ति है: replacePattern2 = /(^|[^\/f])(www\.[\S]+(\b|$))/gim
Redtopia

ऊपर दिए गए कोड में एज मामलों के लिए बहुत सारे परीक्षण विफल होंगे। URL का पता लगाते समय, किसी विशेष लाइब्रेरी पर भरोसा करना बेहतर होता है। यहाँ क्यों है
डैन डस्केल्सस्कु

2
मैंने इसे एक स्ट्रिंग पर चलाया जहां कुछ वेब लिंक पहले से ही उन पर एक href लिंक हैं। इस मामले में यह मौजूदा कामकाजी लिंक को गड़बड़ाने में विफल रहता है।
एडमजोन 15

17

URL की पहचान करना मुश्किल है क्योंकि वे अक्सर विराम चिह्नों से घिरे होते हैं और क्योंकि उपयोगकर्ता अक्सर URL के पूर्ण रूप का उपयोग नहीं करते हैं। हाइपरलिंक्स वाले URL को बदलने के लिए कई जावास्क्रिप्ट फ़ंक्शंस मौजूद हैं, लेकिन मैं एक ऐसा नहीं खोज पाया urlizeजो पाइथन-आधारित वेब फ्रेमवर्क Django में फ़िल्टर के साथ-साथ काम करता हो । इसलिए मैंने Django के urlizeफ़ंक्शन को जावास्क्रिप्ट में पोर्ट किया :

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 फ़ाइल देखें ।


Html स्रोत के साथ भी काम करता है जैसे:
www.web.com <a

@Paulius: यदि आप विकल्प django_compatibleको गलत पर सेट करते हैं , तो यह उस केस को थोड़ा बेहतर तरीके से हैंडल करेगा।
वेबजर्न लोजोसा

Django urlizeठीक से TLDs का समर्थन नहीं करता (कम से कम GitHub पर JS पोर्ट नहीं)। एक पुस्तकालय जो TLD को ठीक से संभालता है, वह है बेन अल्मन का जावास्क्रिप्ट लिंक
Dan Dascalescu

अतिरिक्त शीर्ष-स्तरीय डोमेन वाले URL का पता लगाने के लिए समर्थन तब भी जब URL "http" या "www" से शुरू नहीं होता है।
Vebjorn Ljosa

10

मैंने रोशाम्बो स्ट्रिंगर.लिंक () को ईमेल में लिखा। AadressPattern को पहचानने के लिए 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>');
    };
}

ऊपर दिए गए कोड में एज मामलों के लिए बहुत सारे परीक्षण विफल होंगे। URL का पता लगाते समय, किसी विशेष लाइब्रेरी पर भरोसा करना बेहतर होता है। यहाँ क्यों है
डैन डस्केल्सस्कु

9

मैंने कुछ भी नया करने के लिए 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/

सामान्य लिंक के लिए वास्तव में अच्छी तरह से काम करता है।


यहाँ "सामान्य लिंक" क्या है? अपने डेमो के कांटे को यहां देखें: jsfiddle.net/hEgvc/27 लोग अनलॉक्ड होंगे और इसे आसान तरीके से बनाएंगे। RFC3986 के अनुसार URI आसान बात नहीं है और यदि आप केवल "सामान्य लिंक" को कवर करना चाहते हैं, तो मैं इस regexp को कम से कम अनुसरण करने का सुझाव देता हूं: ^ ([[^: /? #] +):)? (//] ^ /? #] *))? ([^? #] *) (\? ([^ #] *))? (# (। *))?
इवान

2
मुझे प्रारूप http://example.com/folder/folder/folder/या https://example.org/blahआदि में कुछ भी मतलब था - बस आपका सामान्य गैर-पागल URL प्रारूप जो 95-99% उपयोग के मामलों से मेल खाएगा। मैं एक आंतरिक प्रशासनिक क्षेत्र के लिए इसका उपयोग कर रहा हूं, इसलिए मुझे किनारे-मामलों या हैशलिंक को पकड़ने के लिए कुछ भी फैंसी की आवश्यकता नहीं है।
पतित


5

यह समाधान कई अन्य लोगों की तरह काम करता है, और वास्तव में उनमें से एक के रूप में एक ही regex का उपयोग करता है, हालांकि एक HTML स्ट्रिंग को वापस करने के बजाय यह ए तत्व और किसी भी लागू पाठ नोड्स वाले दस्तावेज़ के टुकड़े को लौटा देगा।

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

पुराने आईई और टेक्स्ट कॉन्टेंट सपोर्ट के साथ कुछ कैविएट हैं।

यहाँ एक डेमो है।


2
@DanDascalescu कम्बल के बजाय बहुत कुछ कहे जाने की संभावना है।
11

क्या मुझे यह करना ज़रूरी है? URL के लिए घटक regexp पर एक नज़र डालें । लेकिन अगर आप जोर देते हैं, तो बेन अल्मैन के लिंक टेस्ट सूट के खिलाफ दौड़ें । मैंने असफल परीक्षणों में योगदान देना शुरू कर दिया, उदाहरण के लिए urlize , लेकिन जल्द ही एहसास हुआ कि यह केवल गंभीर पुस्तकालय प्रयासों के लिए ऐसा करने के लायक है। सभी उचित सम्मान के साथ, ऊपर वाला एक StackOverflow उत्तर है, न कि एक खुली खट्टी लाइब्रेरी जो URL को सही ढंग से पार्स करने का प्रयास कर रही है।
डैन डस्केल्सस्कु

2
इसलिए किनारे मामले हैं। आश्चर्यजनक। ये उत्तर अभी भी दूसरों के लिए उपयोगी हो सकते हैं और उन्हें कम्बल ओढ़ने में कंबल की तरह लगता है। आपने जिन अन्य उत्तरों पर टिप्पणी की है और प्रतीत होता है कि उपयोगी जानकारी है (साथ ही साथ आपका उत्तर)। हर कोई उक्त मामलों के खिलाफ नहीं आएगा, और हर कोई पुस्तकालय का उपयोग नहीं करना चाहेगा।
12

बिल्कुल सही। जो लोग regexps की सीमाओं को नहीं समझते हैं, वे वे हैं जो खुशी से सबसे ऊपर के उत्तर से पहले regexp को स्किम करेंगे और इसके साथ चलेंगे। वे लोग हैं, जिन्हें पुस्तकालयों का सबसे अधिक उपयोग करना चाहिए।
डैन डस्केल्सस्कु

1
लेकिन यह कैसे उचित है कि आपके गैर-पसंद किए गए समाधान rexxp के साथ हर जवाब को वोट दें?
rlemon

4

यदि आपको छोटी लिंक (केवल डोमेन) दिखाने की आवश्यकता है, लेकिन एक ही लंबे URL के साथ, आप ऊपर सैम सैमलर के कोड संस्करण के मेरे संशोधन का प्रयास कर सकते हैं

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>");
}

3

रेग पूर्व: /(\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एक वैध के रूप में पास नहीं करना चाहते हैं तो नीचे दिए गए रेग पूर्व का उपयोग करें: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig


ऊपर दिए गए कोड में एज मामलों के लिए बहुत सारे परीक्षण विफल होंगे। URL का पता लगाते समय, किसी विशेष लाइब्रेरी पर भरोसा करना बेहतर होता है। यहाँ क्यों है
दान डस्केल्सस्कु

3

URI जटिलता के बारे में चेतावनी पर ध्यान दिया जाना चाहिए, लेकिन आपके प्रश्न का सरल उत्तर है:
प्रत्येक मैच को बदलने के लिए आपको /gध्वज को RegEx के अंत में जोड़ना होगा :
/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi


3
/**
 * 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/>(");
}

सरल उदाहरण है


2

इसे सरल रखें! कहो कि तुम्हारे पास क्या हो सकता है, बजाय इसके कि तुम्हारे पास क्या है :)

जैसा कि ऊपर उल्लेख किया गया है, URL काफी जटिल हो सकते हैं, खासकर '?' के बाद, और उनमें से सभी एक 'www' से शुरू नहीं होते हैं। जैसेmaps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

इसलिए, इसके बजाय एक जटिल रीजैक्स है जो सभी धार मामलों को पूरा नहीं करता है, और इसे बनाए रखना कठिन होगा, इस बारे में कितना सरल है, जो व्यवहार में मेरे लिए अच्छा है।

मैच

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;

2

अंतरराष्ट्रीय डोमेन और सूक्ष्म वर्ण समर्थन के साथ सही URL का पता लगाना मामूली बात नहीं है। linkify-itपुस्तकालय कई स्थितियों से रेगेक्स बनाता है , और अंतिम आकार लगभग 6 किलोबाइट है :)। यह वर्तमान में स्वीकृत उत्तर में संदर्भित सभी परिवादों से अधिक सटीक है।

सभी किनारे के मामलों की जांच करने और अपने लोगों का परीक्षण करने के लिए लिंक-इट डेमो देखें ।

यदि आपको HTML स्रोत को लिंक करने की आवश्यकता है, तो आपको इसे पहले पार्स करना चाहिए, और प्रत्येक पाठ को अलग से टोकन देना चाहिए।


1

मैंने अभी तक एक और जावास्क्रिप्ट पुस्तकालय लिखा है, यह आपके लिए बेहतर हो सकता है क्योंकि यह कम से कम संभव झूठी सकारात्मक, तेज और आकार में बहुत संवेदनशील है। मैं वर्तमान में सक्रिय रूप से इसे बनाए रख रहा हूं, इसलिए कृपया इसे डेमो पेज में परीक्षण करें और देखें कि यह आपके लिए कैसे काम करेगा।

लिंक: https://github.com/alexcorvi/anchorme.js


बहुत बढ़िया पुस्तकालय। आपका बहुत बहुत धन्यवाद!
सेरदार डेर्मेंकेनी

0

मुझे इसके विपरीत करना था, और html लिंक को सिर्फ URL में बनाना था, लेकिन मैंने आपका regex संशोधित किया और यह एक आकर्षण की तरह काम करता है, धन्यवाद :)

var exp = /<a\s.*href=''"iding(\b(https?pgftppgfile):\/\/?-A-Z0-9+&@#\/%?=~_ |:।।।,;] * [- एक-Z0-9 + और @ # \ /% = ~ _ |]) [ "] *> * <\ / a> / ig;

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

मुझे आपके regex का बिंदु दिखाई नहीं दे रहा है। यह हर चीज की जगह हर चीज से मेल खाता है। वास्तव में आपका कोड कुछ नहीं करता है।
चाड ग्रांट

8
मुझे लगता है कि मुझे लोगों को संपादन समाप्त करने की अनुमति देने के लिए टिप्पणी का इंतजार करना चाहिए। माफ़ करना।
चाड ग्रांट

0

ट्राविट्रॉन के उत्तर में ई-मेल का पता लगाने से मेरे लिए काम नहीं किया गया, इसलिए मैंने इसे (सी / कोड) के साथ बढ़ाया / बदल दिया।

// 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 " जैसे ई-मेल पतों की अनुमति देता है ।


ऊपर दिए गए कोड में एज मामलों के लिए बहुत सारे परीक्षण विफल होंगे। URL का पता लगाते समय, किसी विशेष लाइब्रेरी पर भरोसा करना बेहतर होता है। यहाँ क्यों है
Dan Dascalescu

धन्यवाद, @DanDascalescu आमतौर पर, अति-सामान्यीकरण करना हमेशा बेहतर होता है।
उवे कीम

0

कई स्रोतों से इनपुट के बाद मैंने अब एक समाधान निकाला है जो अच्छी तरह से काम करता है। यह अपने स्वयं के प्रतिस्थापन कोड लिखने के साथ करना था।

उत्तर

फील करना

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;
    });
}

2
उपरोक्त कोड (और सामान्य रूप से सबसे नियमित अभिव्यक्ति) किनारे के मामलों के लिए बहुत सारे परीक्षण विफल हो जाएंगे। URL का पता लगाते समय, किसी विशेष लाइब्रेरी पर भरोसा करना बेहतर होता है। यहाँ क्यों है
डैन डस्केल्सस्कु

दान, क्या ऐसा कोई पुस्तकालय है? हालाँकि इस मामले में हम अभी भी उपरोक्त रेगेक्स का मिलान कर रहे हैं ताकि कोड कभी भी कचरा का उत्पादन न कर सके, जैसे कि कुछ कचरा (भले ही एक अन्य पुस्तकालय कचरे को एक मान्य URL / URI के रूप में प्रमाणित करता है) को इनपुट के रूप में उपयोग किया जाता है।
माइक मेस्टनिक


0

यहाँ मेरा समाधान है:

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

0

नीचे दिए गए फ़ंक्शन का प्रयास करें:

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/"));


0

नीचे दिए गए समाधान का प्रयास करें

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;
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.