লিঙ্কগুলি সহ কীভাবে প্লেইন ইউআরএল প্রতিস্থাপন করবেন?


453

আমি প্রদত্ত পাঠ্যের ভিতরে ইউআরএল মেলে এবং এইচটিএমএল লিঙ্কগুলির জন্য তাদের প্রতিস্থাপন করতে নীচের ফাংশনটি ব্যবহার করছি। নিয়মিত প্রকাশটি দুর্দান্ত কাজ করছে তবে বর্তমানে আমি কেবল প্রথম ম্যাচটিই প্রতিস্থাপন করছি।

আমি কীভাবে সমস্ত ইউআরএল প্রতিস্থাপন করতে পারি? আমার ধারণা আমি এক্সিকিউটিভ কমান্ডটি ব্যবহার করা উচিত , তবে কীভাবে এটি করব তা আমি সত্যিই বুঝতে পারি নি।

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

উত্তর:


350

প্রথমে, ইউআরএলগুলি পার্স করতে আপনার নিজের রেজিএক্সপ্যাক ঘূর্ণন করা একটি ভয়ানক ধারণাআরএফসি অনুসারে আপনি অবশ্যই এটি একটি সাধারণ যথেষ্ট সমস্যা যা কেউ এটির জন্য একটি লাইব্রেরি লিখেছেন, ডিবাগ করেছেন এবং পরীক্ষা করেছেন । ইউআরআইগুলি জটিল - নোড.জেজে ইউআরএল পার্সিংয়ের কোড এবং ইউআরআই স্কিমগুলিতে উইকিপিডিয়া পৃষ্ঠা পরীক্ষা করে দেখুন ।

ইউআরএলগুলি পার্স করার ক্ষেত্রে অনেকগুলি প্রান্তের কেস রয়েছে: আন্তর্জাতিক ডোমেন নাম , আসল ( .museum) বনাম অস্তিত্বহীন ( .etc) টিএলডি, বন্ধনী সহ অদ্ভুত বিরামচিহ্ন , ইউআরএলের শেষে বিরামচিহ্ন, আইপিভি 6 হোস্টনাম ইত্যাদি

আমি দিকে তাকিয়ে করেছি একটি টন এর লাইব্রেরি , এবং কিছু মূল্যবান সত্ত্বেও ব্যবহার করে একটি কয়েক মূল্য আছে:

গ্রন্থাগারগুলি যা আমি এই কাজের জন্য দ্রুত অযোগ্য ঘোষণা করেছি:

আপনি যদি একটি নিয়মিত প্রকাশের জন্য জোর দেন, তবে সর্বাধিক বিস্তৃত হ'ল উপাদানটি থেকে ইউআরএল রিজেক্স্প , যদিও এটি মিথ্যাভাবে কিছু অস্তিত্বহীন দ্বি-বর্ণের টিএলডি এটির দ্বারা সনাক্ত করবে।


3
এটি দুঃখের বিষয় যা URL regexp from Componentমন্তব্য করা হয়নি, এটি কী করছে তার কিছু ব্যাখ্যা সহায়ক হবে। Autolinker.jsখুব ভাল মন্তব্য করা হয় এবং পরীক্ষা আছে। urlize.jsলাইব্রেরিতে লিঙ্ক Vebjorn Ljosa এর উত্তর এছাড়াও featureful এবং ভালভাবে রক্ষণাবেক্ষণ দেখায় যদিও এটি পরীক্ষা নেই।
স্যাম হাসলার

1
Regex101.com স্বয়ংক্রিয়ভাবে regexp "ব্যাখ্যা" করে, তবে তার সাথে সৌভাগ্য :) আমি খুব দ্রুত একটি অবৈধ টিএলডি (একই লিঙ্ক) এর সাথে একটি ব্যর্থতার কেসটিও পেয়েছি।
ড্যান ড্যাসকলেসকু

1
@ সামহ্যাসলার: অটোলিংকারকে টিএলডি এবং আইডিএন অঞ্চলে উন্নতি করতে হবে। কিছু পরীক্ষা যুক্ত করা হয়েছে
ড্যান ড্যাসকলেসকু

2
কৌতূহল যে কেউ ইউআরএল রেজেক্স প্যাটার্ন বজায় রাখার জন্য জন গ্রুবারের প্রচেষ্টার কথা উল্লেখ করেনি । এটি সমস্যার একমাত্র / আদর্শ সমাধান নয়, তবে কোনও ক্ষেত্রেই তদন্তের উপযুক্ত, যদি আপনি নিজের সমাধানটি ঘূর্ণন করে থাকেন। কেবল এটি একটি রেফারেন্স হিসাবে যুক্ত করতে চেয়েছিলেন।
oelna

2
@DanDascalescu এই কটাক্ষপাত markdown-it.github.io/linkify-it । এই লাইব্রেরিটি ঠিক একটি কার্যকে কেন্দ্র করে - পাঠ্যের লিঙ্কের ধরণগুলি সনাক্ত করে। তবে আমি আশা করি, এটি এটি ভালভাবে করে। উদাহরণস্বরূপ, এর অ্যাস্ট্রাল অক্ষরগুলি সহ সঠিক ইউনিকোড সমর্থন রয়েছে। এবং এটি আন্তর্জাতিক টিএলডি সমর্থন করে।
ভাইটালি

285

লিঙ্কগুলি সহ ইউআরএলগুলি প্রতিস্থাপন করা (সাধারণ সমস্যার উত্তর)

প্রশ্নের নিয়মিত প্রকাশটি অনেক প্রকার ক্ষেত্রে মিস করে । ইউআরএলগুলি শনাক্ত করার সময়, এমন একটি বিশেষায়িত গ্রন্থাগার ব্যবহার করা ভাল যা URL এর .museumঅভ্যন্তরে এবং শেষে আন্তর্জাতিক ডোমেন নাম, নতুন টিএলডি , বন্ধনী এবং অন্যান্য বিরামচিহ্ন এবং অন্যান্য অনেক প্রান্তের কেস পরিচালনা করে। জেফ অ্যাটউডের ব্লগ পোস্টটি আরও কিছু সমস্যার ব্যাখ্যার জন্য URL গুলি সহ সমস্যাটি দেখুন

URL টি ম্যাচিং লাইব্রেরি সেরা সারসংক্ষেপ রয়েছে ড্যান Dascalescu এর উত্তর+100
(ফেব্রুয়ারী 2014 হিসাবে)


"একাধিক ম্যাচের প্রতিস্থাপন করুন নিয়মিত প্রকাশ করুন" (নির্দিষ্ট সমস্যার উত্তর)

গ্লোবাল মিলটি সক্ষম করতে নিয়মিত প্রকাশের শেষে একটি "জি" যুক্ত করুন:

/ig;

তবে এটি কেবলমাত্র সমস্যার সমাধান করে যেখানে নিয়মিত প্রকাশটি কেবল প্রথম ম্যাচের পরিবর্তে ছিল। এই কোডটি ব্যবহার করবেন না।


149

ট্র্যাভিসের কোডে আমি কিছুটা ছোট ছোট পরিবর্তন করেছি (কেবল কোনও অপ্রয়োজনীয় পুনঃনির্মাণ এড়াতে - তবে এটি আমার প্রয়োজনের জন্য দুর্দান্ত কাজ করছে, তাই খুব সুন্দর কাজ!):

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
এম্বেড থাকা বস্তু এবং
আইফ্রেমে

5
কোডটিতে একটি বাগ রয়েছে যা এখানে ইমেল ঠিকানার সাথে মেলে। [a-zA-Z]{2,6}লাইন বরাবর কিছু পড়া উচিত (?:[a-zA-Z]{2,6})+যাতে আরো জটিল ডোমেন নাম অর্থাত email@example.co.uk মেলে হবে।
রোশম্বো

1
আমি কিছু সমস্যার মধ্যে পড়েছি; প্রথমে কেবল http: // বা http: // www (স্পেস www ব্যতীত এসওও এই ভুলটিকে স্পষ্টতই পার্স করে) একটি লিঙ্ক তৈরি করবে। এবং লিঙ্কগুলি http: // www এর সাথে। ডোমেইন . com (স্পেস ব্যতীত) একটি খালি লিঙ্ক তৈরি করবে এবং তারপরে href ক্ষেত্রে একটি সংযুক্ত অ্যাঙ্কর ক্লোজিং ট্যাগ সহ।
আলফ্রেড

1
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;যে সংশোধন করা হয়েছে mailto সমস্যা :)
yourdeveloperfriend

69

Linkify()উপরের ট্র্যাভিসের কোডটিতে কিছু অপ্টিমাইজেশন তৈরি করা হয়েছে । আমি এমন একটি বাগও স্থির করেছি যেখানে সাবডোমেন টাইপের ফর্ম্যাটগুলির সাথে ইমেল ঠিকানাগুলি মেলে না। (উদাহরণস্বরূপ @@mainmain.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>');
    };
}

আমার মতে সেরা, প্রোটোটাইপ ফাংশনগুলি জিনিসগুলিকে এত পরিষ্কার করে
তোলে

info@some-thing.com some.thing@example.com ইত্যাদি ..: এটা এটা যেমন ইমেল ঠিকানার সাথে কাজ করে না বলে মনে হয়
মার্কো Gagliardi

পছন্দ করুন সংশোধন করা হয়েছে।
রোশাম্বো

1
এটি "গিট ক্লোন aaaa@bitbucket.org/ooo/bbb-cc-dd.git " স্ট্রিংয়ের জন্য কাজ করে না । এটি স্ট্রিংগুলিকে খণ্ডগুলিতে পরিণত করেছে এবং এই "গিট ক্লোন <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( +প্রথম বন্ধনীতে নোট করুন ), তবে এটি অন্য কিছু ভেঙে গেছে কিনা তা আমি জানি না।
chaাকা:

24

ধন্যবাদ, এটি খুব সহায়ক ছিল। আমি এমন কিছুও চেয়েছিলাম যা URL এর মতো দেখতে এমন জিনিসগুলিকে যুক্ত করবে - একটি মৌলিক প্রয়োজনীয়তা হিসাবে, এটি 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
}

২ য় প্রতিস্থাপনে, (^ | [] /]) অংশটি কেবলমাত্র www.w who.com- কে প্রতিস্থাপন করছে যদি এটি ইতিমধ্যে // দ্বারা উপসর্গ করা না থাকে - যদি প্রথম প্রতিস্থাপনে কোনও ইউআরএল ইতিমধ্যে লিঙ্ক করা থাকে তবে ডাবল-লিঙ্কিং এড়ানোর জন্য। এছাড়াও, এটি সম্ভবত সম্ভব যে www.worses.com স্ট্রিংয়ের শুরুতে হতে পারে যা রেজেক্সের সেই অংশে প্রথম "বা" শর্ত।

এটি জেসি পি এর উপরে চিত্রিত হিসাবে jQuery প্লাগইন হিসাবে সংহত করা যেতে পারে - তবে আমি বিশেষভাবে একটি নিয়মিত ফাংশন চেয়েছিলাম যা বিদ্যমান DOM উপাদানটির উপর অভিনয় করে না, কারণ আমি আমার পাঠ্য নিচ্ছি এবং পরে এটি ডিওমে যুক্ত করছি, এবং আমি পাঠ্যটি যুক্ত করার আগে "লিঙ্কযুক্ত" করা উচিত, তাই আমি এই ফাংশনটির মাধ্যমে পাঠ্যটি পাস করি pass দুর্দান্ত কাজ করে।


1
২ য় প্যাটার্নের সাথে একটি সমস্যা রয়েছে, যা প্লেইন "www.domain.com" এর সাথে মিলে যায়। সমস্যাটি উপস্থিত থাকে যখন ইউআরএলটিতে কোনও ধরণের রেফারার থাকে যেমন: & অবস্থান = http% 3A% 2F% 2Fwww.amazon.com% 2FNeil-ইয়ং% 2Fe% 2FB000APYJWA% 3Fqid% 3D1280679945% 26 এসআর% 3D8-2-এনটি & ট্যাগ = tra0c7 -20 এবং লিঙ্ককোড = ur2 এবং শিবির = 1789 এবং ক্রিয়েটিভ = 9325 - এই ক্ষেত্রে লিঙ্কটি স্বয়ংক্রিয়ভাবে আবার লিঙ্ক হয়েছে। একটি দ্রুত সমাধান হ'ল "/" থাকা অবহেলিত তালিকার পরে "চ" অক্ষর যুক্ত করা। সুতরাং অভিব্যক্তিটি হ'ল: প্রতিস্থাপনপ্যাটরন 2 = /
^

উপরের কোডটি প্রান্তের ক্ষেত্রে প্রচুর পরীক্ষায় ব্যর্থ হবে। ইউআরএলগুলি শনাক্ত করার সময়, বিশেষায়িত লাইব্রেরিতে নির্ভর করা ভাল। এখানে কেন
ড্যান ড্যাসক্লেস্কু

2
আমি কেবল এটিকে একটি স্ট্রিংয়ে চালিয়েছি যেখানে কিছু ওয়েব লিঙ্কের ইতিমধ্যে একটি href লিঙ্ক রয়েছে। এই ক্ষেত্রে এটি বিদ্যমান কার্যত লিঙ্কগুলিকে বিশৃঙ্খলা করতে ব্যর্থ।
অ্যাডম জোনস

17

ইউআরএলগুলি সনাক্ত করা মুশকিল কারণ এগুলি প্রায়শই বিরাম চিহ্ন দ্বারা বেষ্টিত থাকে এবং ব্যবহারকারীরা প্রায়শই ইউআরএল এর পুরো ফর্ম ব্যবহার করেন না। হাইপারলিঙ্কগুলির সাথে ইউআরএলগুলি প্রতিস্থাপনের জন্য অনেক জাভাস্ক্রিপ্ট ফাংশন উপস্থিত রয়েছে, তবে urlizeপাইথন ভিত্তিক ওয়েব ফ্রেমওয়ার্ক জ্যাঙ্গোতে ফিল্টারটির পাশাপাশি কাজ করে এমন একটির সন্ধান করতে আমি অক্ষম । তাই আমি 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"হয় তবে সন্নিবেশ করানো হয়। তৃতীয় যুক্তি, যদি সত্য হয় তবে এইচটিএমএল-এর বিশেষ অর্থ রয়েছে এমন অক্ষরগুলি থেকে পালিয়ে যায়। দেখুন README ফাইলের


এইচটিএমএল উত্সের সাথেও কাজ করে যেমন: www.web.com <a href = "https: // github। Com"> ইউআরএল </ a> কিছু পাঠ্য
পলিয়াস জালিআডুওনিস 25:12

@ পলিয়াস: আপনি যদি অপশনটিকে django_compatibleমিথ্যা হিসাবে সেট করেন তবে এটি ব্যবহারের ক্ষেত্রে কিছুটা ভাল পরিচালনা করবে।
Vebjorn Ljosa

জ্যাঙ্গো urlizeটিএলডি সঠিকভাবে সমর্থন করে না (কমপক্ষে গিটহাবের জেএস বন্দর নয়)। টিএলডি সঠিকভাবে পরিচালনা করে এমন একটি লাইব্রেরি হ'ল বেন আলমানের জাভাস্ক্রিপ্ট লিংকাইফাই
ড্যান ড্যাসক্লেস্কু

URL টি "HTTP" বা "www" দিয়ে শুরু না করা হলেও অতিরিক্ত শীর্ষ-স্তরের ডোমেন সহ ইউআরএল সনাক্তকরণের জন্য সমর্থন।
Vebjorn Ljosa

10

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

উপরের কোডটি প্রান্তের ক্ষেত্রে প্রচুর পরীক্ষায় ব্যর্থ হবে। ইউআরএলগুলি শনাক্ত করার সময়, বিশেষায়িত লাইব্রেরিতে নির্ভর করা ভাল। এখানে কেন
ড্যান ড্যাসক্লেস্কু

9

আমি আরও নতুন কিছুর জন্য গুগলে অনুসন্ধান করেছি এবং এটি জুড়ে ছুটেছি:

$('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 লোকেরা অনাবৃত .াকবে এবং এটিকে সহজ উপায়ে তৈরি করবে। ইউআরআই আরএফসি 3986 অনুসারে সহজ জিনিস নয় এবং আপনি যদি কেবল "সাধারণ লিঙ্কগুলি" কভার করতে চান তবে আমি কমপক্ষে এই রেজিপ্সপ অনুসরণ করার পরামর্শ দিই: ^ (([^: /? #] +):)? (// ([[ ^ /? #] *))? ([^? #] *) (\? ([^ #] *))? (# (। *))?
ইভান

2
আমি বিন্যাস http://example.com/folder/folder/folder/বা https://example.org/blahইত্যাদির জন্য কিছু বোঝাতে চাইছি - কেবলমাত্র আপনার সাধারণ নন-পাগল URL বিন্যাস যা সেখানে ব্যবহারের 95-99% এর সাথে মেলে match আমি এটি একটি অভ্যন্তরীণ প্রশাসনিক অঞ্চলের জন্য ব্যবহার করছি, সুতরাং এজ-কেস বা হ্যাশলিঙ্কগুলি ধরতে আমার অভিনব কোনও প্রয়োজন নেই।
অধঃপতিত করুন

7

এটি করার জন্য সেরা স্ক্রিপ্ট: http://benalman.com / প্রকল্পগুলি / জাভাস্ক্রিপ্ট-linkify-process-lin/


1
খুব খারাপ লেখক ২০০৯ সাল থেকে এটি বজায় রাখেনি I'm আমি ইউএসএল পার্সিং বিকল্পগুলি সংক্ষিপ্ত করছি ।
ড্যান ড্যাসক্লেস্কু

5

এই সমাধানটি অন্য অনেকের মতোই কাজ করে এবং প্রকৃতপক্ষে তাদের মধ্যে একটির মতোই একই রেজেক্স ব্যবহার করে, তবে এইচটিএমএল স্ট্রিং ফিরিয়ে দেওয়ার পরিবর্তে এটি একটি উপাদান এবং যে কোনও প্রযোজ্য পাঠ্য নোড যুক্ত ডকুমেন্টের টুকরো ফিরে আসবে।

 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
@ ড্যানডাসকলেস্কু কম্বলের পরিবর্তে প্রচুর পরিমাণে ডাউনভোটিং সম্ভবত আপনার কথিত প্রান্তগুলি সরবরাহ করবে।
rlemon

আমি প্রয়োজন কি? ইউআরএলগুলির জন্য কম্পোনেন্ট রিজেক্সেপ একবার দেখুন । তবে আপনি যদি জেদ করেন তবে বেন আলমানের লিঙ্কাইফাই টেস্ট স্যুটটির বিরুদ্ধে লড়াই করুন । আমি ব্যর্থ পরীক্ষাগুলির অবদান শুরু করেছি, যেমন urlize এর জন্য , তবে শীঘ্রই বুঝতে পেরেছিলাম যে কেবল গুরুতর গ্রন্থাগারের প্রচেষ্টার জন্য এটি করা ভাল। সমস্ত যথাযথ সম্মানের সাথে, উপরের একটিটি স্ট্যাকওভারফ্লো উত্তর, কোনও URL টি সঠিকভাবে বিশ্লেষণ করার চেষ্টা করা একটি উন্মুক্ত উত্সাহিত লাইব্রেরি নয়।
ড্যান ড্যাসক্লেস্কু

2
সুতরাং প্রান্ত ক্ষেত্রে আছে। বিস্ময়কর। এই উত্তরগুলি এখনও অন্যের জন্য দরকারী হতে পারে এবং কম্বলগুলি ডাউনভোট করা ওভারকিলের মতো বলে মনে হয়। অন্যান্য উত্তর আপনি মন্তব্য করেছেন করেছি এবং আপাতদৃষ্টিতে downvoted Do প্রয়োজনীয় তথ্য নিয়ে আসে (সেইসাথে আপনার উত্তর)। প্রত্যেকেই বলা মামলার বিরুদ্ধে আসবে না এবং সকলেই একটি লাইব্রেরি ব্যবহার করতে চাইবে না।
rlemon

যথাযথভাবে। যারা রেজেক্সপসের সীমাবদ্ধতা বুঝতে পারে না তারাই হলেন যারা সর্বাধিক উত্সাহিত উত্তর থেকে প্রথম রেজিএক্সপাকে আনন্দের সাথে স্কিম করবেন এবং এটির সাথে চালাবেন। তারাই লাইব্রেরিগুলি সবচেয়ে বেশি ব্যবহার করা উচিত।
ড্যান ড্যাসক্লেস্কু

1
তবে কীভাবে যুক্তিযুক্ত যে আপনার প্রতিটি উত্তর অ-আপনার-পছন্দসই-সমাধানগুলি রিজেক্সের সাথে ভোট দেওয়া যায়?
রলেমন

4

যদি আপনাকে সংক্ষিপ্ত লিঙ্ক (কেবলমাত্র ডোমেন) দেখানোর দরকার হয় তবে একই দীর্ঘ ইউআরএল সহ আপনি আমার পোস্ট করা স্যাম হাসলারের কোড সংস্করণটি চেষ্টা করতে পারেন

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


উপরের কোডটি প্রান্তের ক্ষেত্রে প্রচুর পরীক্ষায় ব্যর্থ হবে। ইউআরএলগুলি শনাক্ত করার সময়, বিশেষায়িত লাইব্রেরির উপর নির্ভর করা সর্বদা ভাল। এখানে কেন
ড্যান ড্যাসক্লেস্কু

3

ইউআরআই জটিলতা সম্পর্কে সতর্কতাগুলি লক্ষ্য করা উচিত, তবে আপনার প্রশ্নের সহজ উত্তর হ'ল:
প্রতিটি ম্যাচ প্রতিস্থাপনের জন্য আপনাকে /gরেজিএক্সের শেষে পতাকা যুক্ত করতে হবে:
/(\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

সহজবোধ্য রাখো! আপনার কাছে যা থাকতে পারে তার চেয়ে আপনার যা নেই তা বলুন :)

উপরে উল্লিখিত হিসাবে, ইউআরএলগুলি বেশ জটিল হতে পারে, বিশেষত '?' এর পরে, এবং সেগুলি সবই 'www' দিয়ে শুরু হয় না। যেমনmaps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

সুতরাং, একটি জটিল রেজেক্সের পরিবর্তে যা সমস্ত প্রান্তের কেসগুলি পূরণ করে না, এবং এটি রক্ষণাবেক্ষণ করা শক্ত হবে, কীভাবে এই সরলতম সম্পর্কে, যা অনুশীলনে আমার পক্ষে ভাল কাজ করে।

ম্যাচ

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

www. (anything but a space)+

যেখানে 'কিছু' আছে [^'"<>\s] ... মূলত একটি লোভী মিল, আপনাকে কোনও স্থান, উদ্ধৃতি, কোণ বন্ধনী বা লাইনের শেষের সাথে মিলিত করে

এছাড়াও:

এটি ইতিমধ্যে ইউআরএল ফর্ম্যাটে নেই কিনা তা পরীক্ষা করে দেখুন, যেমন পাঠ্যটি এতে রয়েছে 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

আন্তর্জাতিক ডোমেন এবং জ্যোতির্যুক্ত অক্ষর সমর্থন সহ ইউআরএল সঠিক সনাক্তকরণ তুচ্ছ জিনিস নয়। linkify-itগ্রন্থাগারটি অনেকগুলি শর্ত থেকে রেজেক্স তৈরি করে এবং চূড়ান্ত আকারটি প্রায় 6 কিলোবাইট :)। এটি বর্তমানে স্বীকৃত উত্তরে রেফারেন্সযুক্ত সমস্ত স্তরের চেয়ে আরও নির্ভুল।

সমস্ত প্রান্তের কেস লাইভ চেক করতে লিংকাইফ-এটি ডেমো দেখুন এবং আপনারগুলি পরীক্ষা করুন।

যদি আপনাকে এইচটিএমএল উত্সটি লিঙ্কফাই করতে হয় তবে আপনার প্রথমে এটি বিশ্লেষণ করা উচিত এবং প্রতিটি পাঠ্য টোকেনকে আলাদাভাবে পুনরাবৃত্তি করা উচিত।


1

আমি এখনও অন্য একটি জাভাস্ক্রিপ্ট লাইব্রেরি লিখেছি, এটি আপনার পক্ষে আরও ভাল হতে পারে যেহেতু এটি খুব কম সংখ্যক মিথ্যা ধনাত্মক, দ্রুত এবং আকারে ছোটর সাথে সংবেদনশীল। আমি বর্তমানে এটি সক্রিয়ভাবে বজায় করছি তাই দয়া করে এটি ডেমো পৃষ্ঠায় পরীক্ষা করুন এবং দেখুন এটি আপনার জন্য কীভাবে কার্যকর হবে।

লিঙ্ক: https://github.com/alexcorvi/anchorme.js


দুর্দান্ত লাইব্রেরি আপনাকে অনেক ধন্যবাদ!
সর্দার Değirmenci

0

আমাকে বিপরীতটি করতে হয়েছিল, এবং কেবলমাত্র ইউআরএলতে এইচটিএমএল লিঙ্কগুলি তৈরি করতে হয়েছিল, তবে আমি আপনার রেজেেক্সটি পরিবর্তন করেছি এবং এটি একটি কবজির মতো কাজ করে, ধন্যবাদ :)

var exp = /<a\s.*href=lays'" দদ্দবিবঃ https????????????ptfile) :\/\/sel-A-Z0-9+&@#\/%?=~_ |:।।।;] * [- এ-Z0-9 + @ # \ /% = ~: _ |]) [ ' "] *> * <\ / একটি> / Ig;

উত্স = উত্স.রেজ (এক্সপ্রেস, "$ 1");

আমি আপনার রেজেক্সের বিন্দুটি দেখতে পাচ্ছি না। এটি সমস্ত কিছুর সাথে সমস্ত কিছু প্রতিস্থাপনের সাথে মেলে। বাস্তবে আপনার কোড কিছুই করে না।
চাদ গ্রান্ট

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 " এর মতো ইমেল ঠিকানাগুলির জন্য অনুমতি দেয় ।


উপরের কোডটি প্রান্তের ক্ষেত্রে প্রচুর পরীক্ষায় ব্যর্থ হবে। ইউআরএলগুলি শনাক্ত করার সময়, বিশেষায়িত লাইব্রেরির উপর নির্ভর করা সর্বদা ভাল। এখানে কেন
ড্যান ড্যাসক্লেস্কু

ধন্যবাদ, @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
উপরের কোডটি (এবং বেশিরভাগ নিয়মিত অভিব্যক্তি সাধারণভাবে) প্রান্তের ক্ষেত্রে প্রচুর পরীক্ষায় ব্যর্থ হবে। ইউআরএলগুলি শনাক্ত করার সময়, বিশেষায়িত লাইব্রেরিতে নির্ভর করা ভাল। এখানে কেন
ড্যান ড্যাসক্লেস্কু

ড্যান, এমন লাইব্রেরি আছে? যদিও এই ক্ষেত্রে আমরা এখনও উপরের রেজেক্সের সাথে মিলে যাব যাতে কোড কখনই আবর্জনা আউটপুট করতে না পারে যখন কোনও আবর্জনার মতো (এমনকি অন্য লাইব্রেরিটি আবর্জনাকে বৈধ ইউআরএল / ইউআরআই হিসাবে শংসাপত্র দেয়) এমনকি ইনপুট হিসাবে ব্যবহৃত হয়।
মাইক Mestnik

0

এইচটিএমএল লিঙ্কগুলির সাথে পাঠ্যে ইউআরএলগুলি প্রতিস্থাপন করুন, কোনও href / প্রাক ট্যাগের মধ্যে URL টি উপেক্ষা করুন। https://github.com/JimLiu/auto-link


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;
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.