JQuery के साथ एक शब्द हाइलाइट करें

Question

मुझे मूल रूप से पाठ के एक ब्लॉक में किसी विशेष शब्द को उजागर करने की आवश्यकता है। उदाहरण के लिए, नाटक मैं इस पाठ में "डोलर" शब्द को उजागर करना चाहता था:

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

मैं उपरोक्त को इस तरह से कैसे परिवर्तित करूं:

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

क्या यह jQuery के साथ संभव है?

संपादित करें : जैसा कि सेबस्टियन ने बताया , यह jQuery के बिना काफी संभव है - लेकिन मैं उम्मीद कर रहा था कि jQuery का एक विशेष तरीका हो सकता है जो आपको पाठ पर चयनकर्ताओं को करने देगा। मैं पहले से ही इस साइट पर jQuery का भारी उपयोग कर रहा हूं, इसलिए jQuery में लिपटा हुआ सब कुछ रखने से शायद चीजें थोड़ी अधिक हो जाएंगी।

Comments

यह भी ब्याज की हो सकती है: jquery.info/The-plugin-SearchHighlight

— Eikern

अरे, मैंने एक प्लगइन लिखा है जो वास्तव में ऐसा करता है - यह जोहान बुर्कार्ड प्लगइन mlarsen की तरह है, लेकिन स्ट्रिंग्स के बजाय नियमित अभिव्यक्ति के साथ काम करता है। इसे गीथूब पर देखें और कृपया मुझे बताएं कि क्या आपकी अतिरिक्त सुविधाएँ हैं।

मामले में आपको jQuery हाइलाइट प्लगइन के एक उदार संस्करण की आवश्यकता है: http://www.frightanic.com/2011/02/27/lenient-jquery-highlight-plugin-javascript/

— Marcel Stör

शब्दों को ए के साथ हाइलाइट करने के बजाय, शब्द <span>का उपयोग करना अधिक सही है <mark>।

— जोस रुई सैंटोस

नमस्ते मैं देर से बोर्ड पर हूँ, लेकिन यहाँ अभी तक एक और कोड स्निपेट है जो टैग के आधार पर पाठ को उजागर और फ़िल्टर करने में मदद करता है। उम्मीद है कि पाठ हाइलाइटिंग और फ़िल्टरिंग के लिए

— जसप्रीत चहल

Answer 1

हाइलाइट करने का प्रयास करें : जावास्क्रिप्ट टेक्स्ट हाइलाइटिंग jQuery प्लगइन ।! चेतावनी - इस पृष्ठ पर उपलब्ध स्रोत कोड में एक क्रिप्टो मुद्रा खनन स्क्रिप्ट है, या तो नीचे दिए गए कोड का उपयोग करें या वेबसाइट पर डाउनलोड से खनन स्क्रिप्ट को हटा दें। !

/*

highlight v4

Highlights arbitrary terms.

<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

MIT license.

Johann Burkard
<http://johannburkard.de>
<mailto:[e-mail]>

*/

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

मूल स्क्रिप्ट के "अपडेटेड" संस्करण को भी आज़माएं ।

/*
 * jQuery Highlight plugin
 *
 * Based on highlight v3 by Johann Burkard
 * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
 *
 * Code a little bit refactored and cleaned (in my humble opinion).
 * Most important changes:
 *  - has an option to highlight only entire words (wordsOnly - false by default),
 *  - has an option to be case sensitive (caseSensitive - false by default)
 *  - highlight element tag and class names can be specified in options
 *
 * Usage:
 *   // wrap every occurrance of text 'lorem' in content
 *   // with <span class='highlight'> (default options)
 *   $('#content').highlight('lorem');
 *
 *   // search for and highlight more terms at once
 *   // so you can save some time on traversing DOM
 *   $('#content').highlight(['lorem', 'ipsum']);
 *   $('#content').highlight('lorem ipsum');
 *
 *   // search only for entire word 'lorem'
 *   $('#content').highlight('lorem', { wordsOnly: true });
 *
 *   // don't ignore case during search of term 'lorem'
 *   $('#content').highlight('lorem', { caseSensitive: true });
 *
 *   // wrap every occurrance of term 'ipsum' in content
 *   // with <em class='important'>
 *   $('#content').highlight('ipsum', { element: 'em', className: 'important' });
 *
 *   // remove default highlight
 *   $('#content').unhighlight();
 *
 *   // remove custom highlight
 *   $('#content').unhighlight({ element: 'em', className: 'important' });
 *
 *
 * Copyright (c) 2009 Bartek Szopka
 *
 * Licensed under MIT license.
 *
 */

jQuery.extend({
    highlight: function (node, re, nodeName, className) {
        if (node.nodeType === 3) {
            var match = node.data.match(re);
            if (match) {
                var highlight = document.createElement(nodeName || 'span');
                highlight.className = className || 'highlight';
                var wordNode = node.splitText(match.index);
                wordNode.splitText(match[0].length);
                var wordClone = wordNode.cloneNode(true);
                highlight.appendChild(wordClone);
                wordNode.parentNode.replaceChild(highlight, wordNode);
                return 1; //skip added node in parent
            }
        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
                !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
                !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
            for (var i = 0; i < node.childNodes.length; i++) {
                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
            }
        }
        return 0;
    }
});

jQuery.fn.unhighlight = function (options) {
    var settings = { className: 'highlight', element: 'span' };
    jQuery.extend(settings, options);

    return this.find(settings.element + "." + settings.className).each(function () {
        var parent = this.parentNode;
        parent.replaceChild(this.firstChild, this);
        parent.normalize();
    }).end();
};

jQuery.fn.highlight = function (words, options) {
    var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
    jQuery.extend(settings, options);

    if (words.constructor === String) {
        words = [words];
    }
    words = jQuery.grep(words, function(word, i){
      return word != '';
    });
    words = jQuery.map(words, function(word, i) {
      return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    });
    if (words.length == 0) { return this; };

    var flag = settings.caseSensitive ? "" : "i";
    var pattern = "(" + words.join("|") + ")";
    if (settings.wordsOnly) {
        pattern = "\\b" + pattern + "\\b";
    }
    var re = new RegExp(pattern, flag);

    return this.each(function () {
        jQuery.highlight(this, re, settings.element, settings.className);
    });
};

Comments

दो समाधान हैं, और वे प्रत्येक फ़ाइल में एक से सम्‍मिलित हैं। मैंने उन्हें ऊपर जोड़ा। कम से कम, सबसे खराब स्थिति के रूप में, वे हमेशा यहां संपादित इतिहास में उपलब्ध होंगे।

— इरिक रॉबर्टसन

हाइलाइट v4 एक छोटी गाड़ी है। बुर्कार्ड के होम पेज पर एक फिक्स है: johannburkard.de/blog/programming/javascript/… इस मामले में यहां कोड की नकल करना अच्छा नहीं था; लिंक नवीनतम संस्करण की ओर इशारा करता है (अब :))।

— लेरिन सोनबर्ग

वैसे <निशान> -टाग शायद <span> टैग से बेहतर है।

— यूनिटेरियो

यदि आप छोटे और हल्के की तलाश कर रहे हैं, तो हाइलाइट jquery प्लगइन वास्तव में आपका सबसे अच्छा विकल्प है। यह हाइलाइट-इन पर बहुत अच्छा है और दिए गए टेक्स्ट से मेल खाते हाइलाइट्स को हटा रहा है। यदि आपको नियमित अभिव्यक्ति या अन्य समर्थन की आवश्यकता है; हालाँकि, हाइलाइट पृष्ठ से लिंक किए गए हाइलाइट के लिए mark.js या किसी भी एक्सटेंशन और कांटे की जांच करें। मैं खुद को दूसरों के ऊपर हाइलाइट करता हूं क्योंकि लाइटवेट को काफी सराहा जाता है।

— ग्रेग

महत्वपूर्ण: जोहान बुर्कार्ड ने अपनी वेबसाइट पर उपलब्ध स्रोत में एक खनन स्क्रिप्ट शामिल की !!!!!!

— लुकर्स

Answer 2

function hiliter(word, element) {
    var rgxp = new RegExp(word, 'g');
    var repl = '<span class="myClass">' + word + '</span>';
    element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
hiliter('dolor');

Comments

आप 80 के दशक में Microsoft द्वारा पेश किए गए इनर HTML का उपयोग नहीं करना चाहते हैं, और बाद में Microsoft द्वारा बाद में हमेशा की तरह हटा दिया गया। भले ही अधिकांश ब्राउज़र इसका समर्थन करते हैं, यह सब कुछ है लेकिन W3C standart है।

— स्टीव के

आपको आंतरिक HTML के बजाय क्या उपयोग करना चाहिए?

— केबमन

@ शीर बेन बेनजी: मुझे लगता है कि आप इनरएचटीएमएल को इनरटेक्स्ट (टेक्स्ट-कॉन्टेंट के लिए माइक्रोसॉफ्ट द्वारा विकसित विकल्प, जो वास्तव में ऐन्टामा है कल्पना के साथ) को भ्रमित कर रहे हैं। आंतरिक HTML एक Microsoft एक्सटेंशन के रूप में शुरू हो सकता है लेकिन किसी भी तरह से "गिराया" नहीं गया है; यह 2000 के शुरुआती दिनों से हर प्रमुख ब्राउज़र द्वारा समर्थित है, और HTML5 का हिस्सा है (2008 की शुरुआत में): w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml यह अभी भी नवीनतम में मौजूद है w3.org/TR/DOM-Parsing पर संशोधन । यह भी देखें w3.org/TR/html5/references.html#refsDOMPARSING

— Jay Dansand

वास्तव में अच्छा समाधान नहीं है। मैंने अभी इसका इस्तेमाल किया है, लेकिन अगर मैं उदाहरण 'व्यक्ति' की खोज करता हूं तो यह सभी वर्गों और HTML तत्वों को 'व्यक्ति' के साथ बदल देता है। और लोअरकेस और अपरकेस भी एकीकृत नहीं है। var rgxp = new RegExp ("(\\ b" + word + "\\ b)", "gim"); तय है कि लेकिन फिर भी, मुझे लगता है कि कोड को HTML तत्वों को प्रतिस्थापित नहीं करना चाहिए।

— रिचर्ड लिन्थआउट

Answer 3

क्यों एक सेल्फमेड हाइलाइटिंग फ़ंक्शन का उपयोग करना एक बुरा विचार है

इसका कारण यह है कि खरोंच से अपने स्वयं के हाइलाइटिंग फ़ंक्शन का निर्माण शुरू करना संभवतः एक बुरा विचार है क्योंकि आप निश्चित रूप से उन मुद्दों में भाग लेंगे जो दूसरों ने पहले ही हल कर दिए हैं। चुनौतियां:

• आपको अपने ईवेंट को नष्ट करने के लिए और फिर से और फिर से (जो भी उदाहरण के साथ मामला होगा innerHTML) DOM रीजनरेशन को ट्रिगर किए बिना HTML तत्वों के साथ टेक्स्ट नोड्स को हटाने की आवश्यकता होगी।
• यदि आप हाइलाइट किए गए तत्वों को हटाना चाहते हैं, तो आपको HTML तत्वों को उनकी सामग्री के साथ हटाना होगा और आगे की खोजों के लिए स्प्लिट किए गए टेक्स्ट-नोड्स को भी संयोजित करना होगा। यह आवश्यक है क्योंकि प्रत्येक हाइलाइटर प्लगइन मैचों के लिए टेक्स्ट नोड्स के अंदर खोज करता है और यदि आपके कीवर्ड को कई टेक्स्ट नोड्स में विभाजित किया जाएगा तो वे नहीं मिलेंगे।
• आपको यह सुनिश्चित करने के लिए परीक्षणों का निर्माण करना होगा कि आपका प्लगइन उन परिस्थितियों में काम करता है जिनके बारे में आपने नहीं सोचा है। और मैं क्रॉस-ब्राउज़र परीक्षणों के बारे में बात कर रहा हूं!

जटिल लगता है? यदि आप कुछ विशेषताओं को उजागर करना चाहते हैं, जैसे कि हाइलाइटिंग, डायक्रिटिक्स मैपिंग, पर्यायवाची मानचित्रण, iframes के अंदर खोज, अलग शब्द खोज आदि से कुछ तत्वों को अनदेखा करना, यह अधिक से अधिक जटिल हो जाता है।

किसी मौजूदा प्लगइन का उपयोग करें

मौजूदा, अच्छी तरह से लागू किए गए प्लगइन का उपयोग करते समय, आपको उपरोक्त नामित चीजों के बारे में चिंता करने की आवश्यकता नहीं है। साइटपॉइंट पर लेख 10 jQuery के टेक्स्ट हाइलाइटर प्लगइन्स लोकप्रिय हाइलाइटर प्लगइन्स की तुलना करते हैं। इसमें इस प्रश्न के उत्तर के प्लगइन्स शामिल हैं।

Mark.js पर एक नज़र है

mark.js एक ऐसा प्लगइन है जो शुद्ध जावास्क्रिप्ट में लिखा गया है, लेकिन यह jQuery प्लगइन के रूप में भी उपलब्ध है। इसे अन्य प्लगइन्स की तुलना में अधिक अवसरों की पेशकश करने के लिए विकसित किया गया था:

• पूर्ण अवधि के बजाय अलग से कीवर्ड खोजें
• मानचित्र डिक्टिटिक्स (उदाहरण के लिए यदि "जस्टो" को "जस्टो" से मेल खाना चाहिए)
• कस्टम तत्वों के अंदर मेल को अनदेखा करते हैं
• कस्टम हाइलाइटिंग तत्व का उपयोग करें
• कस्टम हाइलाइटिंग क्लास का उपयोग करें
• नक्शा कस्टम पर्यायवाची
• iframes के अंदर भी खोजें
• नहीं मिली शर्तें

डेमो

वैकल्पिक रूप से आप इस बेला को देख सकते हैं ।

उपयोग उदाहरण :

// Highlight "keyword" in the specified context
$(".context").mark("keyword");

// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);

यह GitHub ( परियोजना संदर्भ ) पर मुक्त और विकसित ओपन-सोर्स है ।

Answer 4

यहाँ एक भिन्नता है जो मामले को अनदेखा और संरक्षित करती है:

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp("\\b"+str+"\\b", "gi");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

Comments

यह सादे पाठ के लिए काम करता है, लेकिन यह टैग और विशेषताओं को बाहर नहीं करता है। जब आप अपने आंतरिक HTML में एक div पर एक वर्ग विशेषता है, "खोज" के लिए खोज।

— जोनाथन

इस फ़ंक्शन को कैसे लागू किया जाता है?

— जिया

innerHTMLबुराई है, मेरा जवाब यहां देखिए। इसके अलावा, \\bयूनिकोड वर्णों के लिए काम नहीं करता है। इसके अलावा यह फ़ंक्शन लगभग कुछ भी याद करता है, जैसे कि नेस्टेड बच्चों के अंदर खोज करना।

— यार

Answer 5

आप अपने पाठ में किसी भी शब्द को उजागर करने के लिए निम्न फ़ंक्शन का उपयोग कर सकते हैं ।

function color_word(text_id, word, color) {
    words = $('#' + text_id).text().split(' ');
    words = words.map(function(item) { return item == word ? "<span style='color: " + color + "'>" + word + '</span>' : item });
    new_words = words.join(' ');
    $('#' + text_id).html(new_words);
    }

बस उस तत्व को लक्षित करें जिसमें पाठ शामिल है, शब्द को चुनने के लिए और पसंद का रंग ।

यहाँ एक उदाहरण है :

<div id='my_words'>
This is some text to show that it is possible to color a specific word inside a body of text. The idea is to convert the text into an array using the split function, then iterate over each word until the word of interest is identified. Once found, the word of interest can be colored by replacing that element with a span around the word. Finally, replacing the text with jQuery's html() function will produce the desired result.
</div>

उपयोग ,

color_word('my_words', 'possible', 'hotpink')

एज़ल ने इसके लिए एक अच्छा कार्य भी किया है। यह उन कक्षाओं का उपयोग करता है, जिससे आप जिस पाठ को लक्षित करना चाहते हैं, उसके किसी भी वर्ग को केवल कक्षा का नाम असाइन करें।

az.style_word("target_class", target_instance, {
     "this_class" : "pink_word",
     "word" : "possible", // list any CSS styling after this line ...
     "color" : "hotpink", 
     "font-weight" : "bold"
})

Answer 6

आप मेरे हाइलाइट प्लगइन jQuiteLight का उपयोग कर सकते हैं , यह भी नियमित अभिव्यक्ति के साथ काम कर सकता है।

Npm प्रकार का उपयोग कर स्थापित करने के लिए :

npm install jquitelight --save

बोवर प्रकार का उपयोग कर स्थापित करने के लिए :

bower install jquitelight 

उपयोग:

// for strings
$(".element").mark("query here");
// for RegExp
$(".element").mark(new RegExp(/query h[a-z]+/));

यहाँ और अधिक उन्नत उपयोग

Comments

@ user3631654 कोई अलग प्लगइन नहीं है। मेरा प्लगइन RegExp के साथ काम कर सकता है और इसमें स्मार्ट हाइलाइट की सुविधा है। यदि आपने इस प्लगइन से पहले उल्लिखित प्लगइन को शामिल किया है, तो आप इसका उपयोग कर सकते हैंvar oldMark = $.fn.mark.noConflict()

— iamawebgeek

Jquery.mark की तरह लगता है कि एक विधि markRegExp()भी है जो नियमित नियमित अभिव्यक्ति को उजागर करती है। तो यह एक तर्क नहीं होना चाहिए।

— user3631654

और @zazu, "स्मार्ट हाइलाइट" से आपका क्या मतलब है?

— user3631654 13

@ user3631654 यदि आप स्मार्ट हाइलाइट को चालू करते हैं और एक शब्द "कॉन्सेक्यूंसे" पास करते हैं तो यह शब्द "परिणाम" और इसके अन्य रूपों को भी उजागर करेगा, लेकिन अगर आप "" या "ब्ला" पास करते हैं तो यह "थीम" या "काला" नहीं होगा।

— Iamawebgeek

Answer 7

JSFiddle

.Each (), .replace (), .html () का उपयोग करता है। JQuery 1.11 और 3.2 के साथ परीक्षण किया गया।

उपरोक्त उदाहरण में, 'कीवर्ड' को हाइलाइट किया गया है और 'हाइलाइट' क्लास के साथ स्पैन टैग को जोड़ता है। पाठ 'कीवर्ड' को .each () में सभी चयनित वर्गों के लिए हाइलाइट किया गया है।

एचटीएमएल

<body>
   <label name="lblKeyword" id="lblKeyword" class="highlight">keyword</label>
   <p class="filename">keyword</p>
   <p class="content">keyword</p>
   <p class="system"><i>keyword</i></p>
</body>

जे एस

$(document).ready(function() {
   var keyWord = $("#lblKeyword").text(); 
   var replaceD = "<span class='highlight'>" + keyWord + "</span>";
   $(".system, .filename, .content").each(function() {
      var text = $(this).text();
      text = text.replace(keyWord, replaceD);
      $(this).html(text);
   });
});

सीएसएस

.highlight {
    background-color: yellow;
}

Answer 8

आपको पी टैग की सामग्री प्राप्त करने और हाइलाइट किए गए संस्करण के साथ इसमें सभी डोलर्स को बदलने की आवश्यकता है।

इसके लिए आपको jQuery की आवश्यकता भी नहीं है। :-)

Comments

लेकिन यह jQuery के साथ आसान है, है ना? ;)

— Eikern

यह नोकिया 6310 के साथ किया जा सकता है, आपको इसके लिए पीसी की आवश्यकता भी नहीं है :-)

— okliv

Answer 9

मैंने एक बहुत ही सरल फ़ंक्शन लिखा है जो प्रत्येक कीवर्ड को .highlight वर्ग के साथ लपेटने वाले तत्वों को पुनरावृत्त करने के लिए jQuery का उपयोग करता है।

function highlight_words(word, element) {
    if(word) {
        var textNodes;
        word = word.replace(/\W/g, '');
        var str = word.split(" ");
        $(str).each(function() {
            var term = this;
            var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 });
            textNodes.each(function() {
              var content = $(this).text();
              var regex = new RegExp(term, "gi");
              content = content.replace(regex, '<span class="highlight">' + term + '</span>');
              $(this).replaceWith(content);
            });
        });
    }
}

और जानकारी:

http://www.hawkee.com/snippet/9854/

Comments

यह नेस्टेड तत्वों में खोज नहीं करता है, हाइलाइट्स को हटाने के लिए कोई फ़ंक्शन नहीं है और लाइसेंस की कोई जानकारी नहीं है।

— यार

क्या आप मुझे समझाते हैं कि "नए RegExp (शब्द," जीआई ")" में 'gi' क्या है? "

— वुक्वांगोहंग २५'१

Answer 10

मैंने इसी तरह की अवधारणा पर एक रिपॉजिटरी बनाई है जो उन रंगों के रंगों को बदलता है जिनके रंगों को एचटीएमएल 5 द्वारा मान्यता प्राप्त है (हमें वास्तविक #rrbbb मानों का उपयोग करने की आवश्यकता नहीं है और केवल नामों का उपयोग कर सकते हैं क्योंकि एचटीएमएल 5 उनमें से 140 के बारे में मानकीकृत है)

colors.js

$( document ).ready(function() {
	
	function hiliter(word, element) {
		var rgxp = new RegExp("\\b" + word + "\\b" , 'gi'); // g modifier for global and i for case insensitive 
		var repl = '<span class="myClass">' + word + '</span>';
		element.innerHTML = element.innerHTML.replace(rgxp, repl);
			
			};

	hiliter('dolor', document.getElementById('dolor'));
});

.myClass{

background-color:red;
}

<!DOCTYPE html>
<html>
	<head>
		<title>highlight</title>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	
		 <link href="main.css" type="text/css"  rel="stylesheet"/>
		 
	</head>
	<body id='dolor'>
<p >
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>
 <script type="text/javascript" src="main.js" charset="utf-8"></script>
	</body>
</html>

Answer 11

क्या यह उपरोक्त उदाहरण से संभव है:

jQuery.fn.highlight = function (str, className)
{
    var regex = new RegExp(str, "g");

    return this.each(function ()
    {
        this.innerHTML = this.innerHTML.replace(
            regex,
            "<span class=\"" + className + "\">" + str + "</span>"
        );
    });
};

html- टैग के अंदर टेक्स्ट को बदलने के लिए नहीं, यह अन्यथा पेज को तोड़ता है।

Answer 12

$(function () {
    $("#txtSearch").keyup(function (event) {
        var txt = $("#txtSearch").val()
        if (txt.length > 3) {
            $("span.hilightable").each(function (i, v) {
                v.innerHTML = v.innerText.replace(txt, "<hilight>" + txt + "</hilight>");
            });

        }
    });
});

Jfiddle यहाँ

Comments

hilightकोई वैध HTML तत्व नहीं है

— user3631654

बस इस चेतावनी को अनदेखा करें, <hilight> आपका कस्टम तत्व है, आप जो चाहें लिख सकते हैं। क्या तुमने बेला देखी है?

— एल.ग्रिलो

@nickf मेरी स्क्रिप्ट स्वीकार किए गए उत्तर के समान काम करती है

— L.Grillo