सबसे पहले, www.domain.com, एक यूआरएल नहीं है, यह एक होस्ट नाम है
<a href="www.domain.com">
, और
काम नहीं करेगा - यह .com फ़ाइल को वर्तमान पृष्ठ के सापेक्ष www.domain कहलाता है।
सामान्य मामले में होस्टनामों को हाइलाइट करना संभव नहीं है क्योंकि लगभग कुछ भी होस्टनाम हो सकता है। आप 'www.something.dot.separated.words' को हाइलाइट करने का प्रयास कर सकते हैं, लेकिन यह वास्तव में विश्वसनीय नहीं है और ऐसी कई साइटें हैं जो www. होस्टनाम उपसर्ग का उपयोग नहीं करती हैं। मैं इससे बचने की कोशिश करता हूं।
/\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/;
यह एक बहुत उदार पैटर्न आप का पता लगाने HTTP URL को लिए एक प्रारंभिक बिंदु के रूप में इस्तेमाल कर सकते हैं है। आपको किस तरह के इनपुट मिलते हैं, इस पर निर्भर करता है कि आप इसे अनुमति देने के लिए संकुचित करना चाहते हैं, और . या ! जैसे पीछे वाले वर्णों का पता लगाना उचित हो सकता है जो यूआरएल के वैध भाग होंगे लेकिन अभ्यास में आम तौर पर नहीं होते हैं।
(आप एक | का उपयोग की अनुमति के लिए कर सकता है या तो URL सिंटैक्स याwww.hostname वाक्य रचना, यदि आप चाहें।)
किसी भी तरह, एक बार आप अपनी पसंद के पैटर्न पर बसे है कि आप की आवश्यकता होगी पृष्ठ पर टेक्स्ट नोड्स में उस पैटर्न को ढूंढें। innerHTML मार्कअप पर regexp को न चलाएं। आप पहले से ही मार्कअप के अंदर मौजूद प्रत्येक href="http://something" को चिह्नित करने का प्रयास कर पृष्ठ को पूरी तरह से बर्बाद कर देंगे। जब आप innerHTML सामग्री को प्रतिस्थापित करते हैं तो आप किसी भी मौजूदा जावास्क्रिप्ट संदर्भ, ईवेंट या फॉर्म फ़ील्ड मानों को भी नष्ट कर देंगे।
सामान्य regexp में किसी भी विश्वसनीय तरीके से HTML को संसाधित नहीं कर सकता है। इसलिए इस तथ्य का लाभ उठाएं कि ब्राउजर ने HTML को तत्वों और टेक्स्ट नोड्स में पहले से ही पार्स कर दिया है, और केवल टेक्स्ट नोड्स को देखें। आप <a> तत्वों के अंदर दिखने से भी बचना चाहेंगे, क्योंकि लिंक के रूप में एक यूआरएल को चिह्नित करने के बाद से लिंक में पहले से ही मूर्खतापूर्ण (और अमान्य) है।
// Mark up `http://...` text in an element and its descendants as links.
//
function addLinks(element) {
var urlpattern= /\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/g;
findTextExceptInLinks(element, urlpattern, function(node, match) {
node.splitText(match.index+match[0].length);
var a= document.createElement('a');
a.href= match[0];
a.appendChild(node.splitText(match.index));
node.parentNode.insertBefore(a, node.nextSibling);
});
}
// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findTextExceptInLinks(element, pattern, callback) {
for (var childi= element.childNodes.length; childi-->0;) {
var child= element.childNodes[childi];
if (child.nodeType===Node.ELEMENT_NODE) {
if (child.tagName.toLowerCase()!=='a')
findTextExceptInLinks(child, pattern, callback);
} else if (child.nodeType===Node.TEXT_NODE) {
var matches= [];
var match;
while (match= pattern.exec(child.data))
matches.push(match);
for (var i= matches.length; i-->0;)
callback.call(window, child, matches[i]);
}
}
}