जावास्क्रिप्ट/JQuery

Question

में लाइव खोज के लिए एक हाइलाइट सुविधा को कार्यान्वित करना मैं जीवनशैली के लिए एक हाइलाइटिंग सुविधा को लागू करने की कोशिश कर रहा हूं।

मैं क्या करता हूं, उपयोगकर्ता द्वारा देखे जाने वाले टोकन के साथ AJAX अनुरोध भेजें। मुझे एक टेबल युक्त एक HTML पाठ प्राप्त होता है।

तो मैं मैं एक साधारण regex का उपयोग कर सकता है, उन टोकन और फिर एक अवधि के साथ उसके दोनों ओर की तलाश में है, लेकिन मैं कुछ longfilled <a> प्राप्त कर रहा सोचा - टैग, इसलिए संभावना है अच्छे हैं कि उपयोगकर्ता प्रकार कुछ और मैं तोड़ने मेरी एक टैग के अंदर कुछ बदलकर एचटीएमएल।

तो मैं अपनी खोज में एचटीएमएल टैग कैसे बहिष्कृत कर सकता हूं?

ओह मैं जावास्क्रिप्ट regexp का उपयोग कर रहा हूँ।

Answer 1

आप jQuery highlight प्लगइन लोड करने के लिए की आवश्यकता होगी और फिर आप बस कुछ इस तरह कर सकते हैं:

var words = "keyword1,keyword2,keyword3"; 
var keywords = words.split(','); 
for(var i = 0; i < keywords.length; i++) { 
    $(selector).highlight($.trim(keywords[i])); 
} 

आप चाहते पूरे पृष्ठ में प्रकाश डाला है, तो 'body' साथ selector की जगह, अन्यथा वांछित तत्व के लिए चयनकर्ता का उपयोग ।

Answer 2

//These results to be highlighted 
var results = []; 
results[0] = 'jquery'; 
results[1] = 'json'; 
results[2] = 'Java Script'; 
results[3] = 'java'; 
results[4] = 'java Update'; 
results[5] = 'javelin'; 
results[6] = 'James'; 
results[7] = 'jacob'; 
results[8] = 'Jail'; 
results[9] = 'Jailor'; 

jQuery(document).ready(function(){ 
    //Search the results 
    jQuery('#search').live('keyup', function(event){ 
     var term = jQuery(this).val();//keyword to be matched 
     var htm = ''; 

     //Keys with codes 40 and below are special (enter, arrow keys, escape, etc.), Key code 8 is backspace. 
     if(event.keyCode > 40 || event.keyCode <91 || event.keyCode == 8 || 
      event.keyCode == 20 || event.keyCode == 16 || event.keyCode == 9 || 
      event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || 
      event.keyCode == 40) { 
      for(x in results){ 
       var match = results[x]; 
       if(match.toLowerCase().indexOf(term.toLowerCase()) != -1){ 
        var o = '<b><u>'+term+'</u></b>'; 
        var a = match.replace(term, o); 
        htm += '<li>'+a+'</li>'; 
       } 
      } 
      //create a orderd list for the matched results 
      var output = '<ol>' + htm + '</ol>'; 
      if (htm.length > 0) { 
       jQuery('#result').show().append(output); 
      } 
     } 
    }); 
}); 

पूरा ट्यूटोरियल यहां पाया जा सकता: http://www.webspeaks.in/2012/09/live-text-search-highlight-using.html

Answer 3

सुनिश्चित नहीं हैं कि कैसे अच्छी तरह से jQuery प्लगइन काम करता है, यहाँ स्क्रिप्ट मैं के साथ आया है, लेकिन कई टैग से अधिक लेख को हाइलाइट नहीं है। अगर मैं "मेरी स्क्रिप्ट" को हाइलाइट करना चाहता हूं और एचटीएमएल "मेरी स्क्रिप्ट" जैसा दिखता है तो इसे हाइलाइट नहीं किया जाएगा। अभी भी उस हिस्से पर काम कर रहा है।

str='<img src="brown fox.jpg" title="The brown fox" />' 
    +'<p>some text containing fox. And onother fox.</p>' 
var word="fox"; 
word="(\\b"+ 
    word.replace(/([{}()[\]\\.?*+^$|=!:~-])/g, "\\$1") 
     + "\\b)"; 
var r = new RegExp(word,"igm") 
str.replace(/(>[^<]+)/igm,function(a){ 
    return a.replace(r,"<span class='hl'>$1</span>"); 
}) 

:

यहाँ स्क्रिप्ट अब तक है