दिलचस्प पोस्ट
PHP के साथ MySQL डेटाबेस में ब्लॉस्स सम्मिलित करें 32-बिट पूर्णांक में सेट बिट की संख्या की गणना कैसे करें? स्काला के प्रतीकात्मक ऑपरेटरों का क्या मतलब है? ASP.NET कैसे उपयोगकर्ता के लिए स्ट्रीम करने के लिए फ़ाइल फ्लेक्स आधार और चौड़ाई के बीच अंतर क्या हैं? सी # द्वारा हैंडल के साथ Excel अनुप्रयोग का उदाहरण प्राप्त करें जावास्क्रिप्ट के साथ अपलोड करने से पहले छवि चौड़ाई और ऊंचाई की जांच करें मैं जैक्सन के साथ एक कस्टम सीरियलआइज़र का उपयोग कैसे करूं? फेसबुक ग्राफ़ एपीआई का उपयोग करके सभी उपयोगकर्ता मित्र प्राप्त करें – Android UIScrollView अनंत स्क्रॉलिंग IPython / jupyter नोटबुक कार्य निर्देशिका बदलें नॉर्मल में 1D एरे के लिए रोलिंग विंडो? इनलाइन ब्लॉक इंटरनेट एक्सप्लोरर 7, 6 में काम नहीं करता है क्या asp.net MVC में अनुप्रयोग चर है? क्या JSON के लिए एक स्ट्रीमिंग एपीआई है?

regex और javascript का उपयोग करते हुए html में शब्द हाइलाइट करें – लगभग वहां

मैं एक jquery प्लगइन लिख रहा हूँ जो एक ब्राउज़र-शैली खोज-ऑन-पेज खोज करेगा। मुझे खोज में सुधार करने की आवश्यकता है, लेकिन अभी तक html को पार्स करने में नहीं जाना चाहता।

फिलहाल मेरा दृष्टिकोण एक संपूर्ण डोम तत्व और सभी नेस्टेड तत्वों को लेना है और किसी दिए गए शब्द के लिए केवल एक regex ढूँढें / बदलें। प्रतिस्थापन में मैं बस मिलान की अवधि के चारों ओर एक अवधि को लपेटूंगा और मेरे लंगर, हाइलाइटिंग, स्क्रॉलिंग इत्यादि के रूप में उस अवधि का उपयोग करूँगा। यह महत्वपूर्ण है कि किसी एचटीएमएल टैग के अंदर कोई भी अक्षर मेल नहीं खाता।

यह उतना करीब है जितना मैंने कमाया है:

(?<=^|>)([^><].*?)(?=<|$) 

यह उन सभी वर्णों को कैप्चर करने का एक बहुत अच्छा काम करता है जो एक HTML टैग में नहीं हैं, लेकिन मुझे पता लगाना है कि कैसे अपना खोज शब्द सम्मिलित करना है

 Input: Any html element (this could be quite large, eg <body>) Search Term: 1 or more characters Replace Txt: <span class='highlight'>$1</span> 

अद्यतन करें

जब मैं http://gskinner.com/RegExr/ के साथ परीक्षण कर रहा हूं, तो निम्नलिखित regex मुझे क्या चाहिए …

 Regex: (?<=^|>)(.*?)(SEARCH_STRING)(?=.*?<|$) Replacement: $1<span class='highlight'>$2</span> 

हालांकि मुझे मेरे जावास्क्रिप्ट में इसका इस्तेमाल करने में कुछ परेशानी हो रही है। निम्नलिखित कोड क्रोम के साथ मुझे "त्रुटिहीन नियमित अभिव्यक्ति: / (? <= ^ |>) (। ) (मैरी) (? =। ? <? <$ $) /: अमान्य समूह" त्रुटि दे रही है "

 var origText = $('#'+opt.targetElements).data('origText'); var regx = new RegExp("(?<=^|>)(.*?)(" + $this.val() + ")(?=.*?<|$)", 'gi'); $('#'+opt.targetElements).each(function() { var text = origText.replace(regx, '$1<span class="' + opt.resultClass + '">$2</span>'); $(this).html(text); }); 

यह ग्रुप पर तोड़ रहा है (? <= ^ |>) – क्या यह कुछ बेतरतीब या रेगेक्स इंजन में अंतर है?

अद्यतन करें

कारण है कि इस regex उस समूह पर तोड़ रहा है क्योंकि जावास्क्रिप्ट regex lookbehinds का समर्थन नहीं करता है। संदर्भ और संभव समाधान के लिए: http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript ।

वेब के समाधान से एकत्रित समाधान "regex और javascript का उपयोग करते हुए html में शब्द हाइलाइट करें – लगभग वहां"

बस jQuery के अंतर्निहित text() विधि का उपयोग करें यह किसी चयनित DOM तत्व में सभी वर्ण वापस करेगा।

DOM दृष्टिकोण ( Node इंटरफ़ेस के लिए दस्तावेज़ ) के लिए: एक तत्व के सभी बाल नोड्स पर चलाएं। यदि बच्चा एक तत्व नोड है, तो फिर से चलें यदि यह एक पाठ नोड है, तो पाठ ( node.data ) में खोजें और यदि आप कुछ को हाइलाइट / बदलना चाहते हैं, तो नोड के टेक्स्ट को तब तक छोटा करें जब तक कि आपको इसकी स्थिति नहीं मिल पाई जाए, और मिलान किए गए पाठ और एक अन्य पाठ नोड के साथ एक हाईलिगथ-स्पैन डालें बाकी पाठ के लिए

उदाहरण कोड (समायोजित, मूल यहां है ):

 (function iterate_node(node) { if (node.nodeType === 3) { // Node.TEXT_NODE var text = node.data, pos = text.search(/any regular expression/g), //indexOf also applicable length = 5; // or whatever you found if (pos > -1) { node.data = text.substr(0, pos); // split into a part before... var rest = document.createTextNode(text.substr(pos+length)); // a part after var highlight = document.createElement("span"); // and a part between highlight.className = "highlight"; highlight.appendChild(document.createTextNode(text.substr(pos, length))); node.parentNode.insertBefore(rest, node.nextSibling); // insert after node.parentNode.insertBefore(highlight, node.nextSibling); iterate_node(rest); // maybe there are more matches } } else if (node.nodeType === 1) { // Node.ELEMENT_NODE for (var i = 0; i < node.childNodes.length; i++) { iterate_node(node.childNodes[i]); // run recursive on DOM } } })(content); // any dom node 

वहाँ भी highlight.js है , जो कि वास्तव में आप क्या चाहते हो