2012-03-16 10 views
7

मैं करने की कोशिश कर रहा हूं: शीर्षक में कहा गया है कि, यदि यह एक आरक्षित शब्द है तो मैं एक शब्द का सीएसएस सेट करना चाहता हूं। कोड के सीएसएस को आरक्षित शब्दों में सेट करें


एचटीएमएल

<html> 
    <body> 
     <code id="java"> 
      public static void main(String[] args)<br> 
      { 
       <pre> System.out.println("Hello World!");</pre> 
      } 
     </code> 
    </body> 
</html> 


jQuery

$(document).ready(function() 
{ 
    // Get the text inside the code tags 
    var code = $("#java").text(); 

    // Split up each word 
    var split = code.split(' '); 

    // Array of reserved words 
    var array = ["abstract","assert","boolean","break","byte","case", 
       "catch","char","class","const","continue","default", 
       "do","double","else","else if","enum","extends","final", 
       "finally","float","for","goto","if","import","implements", 
       "instanceof","int","interface","long","native","new","null", 
       "package","private","protected","public","return","short", 
       "static","strictfp","super","switch","synchronized","this", 
       "throw","throws","transient","void","volatile","while"]; 

    // Added when text contains a reserved word 
    var css = {'font-weight':'bold','color':'#2400D9'} 

    array = jQuery.map(array, function(n,i) 
    { 
     for (int j=0; j<array.length; j++) 
     { 
      if (split[i].contains(array[j])) 
       split[i].css(css); 
     } 
    }); 
}); 


समस्या: मैं (नीचे संदर्भ खंड में) कई तरीके के लिए दस्तावेज़ में संदर्भित किया जाता है, लेकिन मुझे पूरा यकीन नहीं है कि समस्या कहां है। मुद्दा को कम करने के लिए, मेरे सवाल (रों) होगा ...

  1. .split() jQuery में भी एक विधि है?
  2. क्या मुझे सरणी में सभी शब्दों के माध्यम से चलाने के लिए for पाश का उपयोग करना चाहिए (यह देखने के लिए कि कोड में आरक्षित शब्द है या नहीं) या क्या कोई बेहतर दृष्टिकोण है (जैसे .each())?
  3. अगर मुझे .each() का उपयोग करना चाहिए, तो क्या कोई मुझे एक साधारण उदाहरण दे सकता है? मैं दस्तावेज़ीकरण में उदाहरणों को समझ नहीं पा रहा हूं।


संदर्भ

+0

jQuery जावास्क्रिप्ट और JavaScript पद्धतियों हर समय का उपयोग करता है। इस पोस्ट को जांचें, इससे बहुत मदद मिल सकती है - http://stackoverflow.com/questions/784012/javascript-equivalent-of-phps-in-array –

+0

['.split()'] (http: //www.w3schools .com/jsref/jsref_split.asp) जावास्क्रिप्ट में एक स्ट्रिंग विधि है। तो यह jQuery में एक स्ट्रिंग विधि भी है;)। – Zeta

+1

बीटीडब्ल्यू, $ .each() मूल जेएस फॉर लूप (http://jsperf.com/jquery-vs-lowdash-loops/4) से थोड़ा धीमा प्रदर्शन करता है, लेकिन इसका उपयोग करने के लिए और अधिक सुविधाजनक है। जब मैं बहुत सारे तत्व पसंद नहीं करता हूं। प्रत्येक()। अधिक तत्वों के साथ प्रदर्शन अंतर दिखाना शुरू होता है और फिर मैं आमतौर पर लूप के लिए सामान्य का उपयोग करता हूं। –

उत्तर

4

अगर मैं सही ढंग से समझ, आप प्राप्त कर सकते हैं कि आप क्या चाहते हैंका उपयोग करऔर span टैग के साथ आरक्षित शब्द लपेटना। मेरे DEMO

संपादित करें: नीचे jQuery $ .inArray दस्तावेज़ से है।

$.inArray(value, array [, fromIndex]) -

valueThe मूल्य के लिए खोज करने के लिए।

array एक सरणी जिसके माध्यम से खोजना है।

इंडेक्स से खोज शुरू करने के लिए सरणी की अनुक्रमणिका। डिफ़ॉल्ट 0 है, जो पूरे सरणी को खोजेगा।

..read more..

सीएसएस

.code { 
    font-weight: bold; 
    color: #2400D9; 
} 

जे एस

$(document).ready(function() { 
    // Get the text inside the code tags 
    var code = $("#java").html(); 

    // Split up each word 
    var split = code.split(' '); 

    // Array of reserved words 
    var array = ["abstract", "assert", "boolean", "break", "byte", "case", "catch", "char", "class", "const", "continue", "default", "do", "double", "else", "else if", "enum", "extends", "final", "finally", "float", "for", "goto", "if", "import", "implements", "instanceof", "int", "interface", "long", "native", "new", "null", "package", "private", "protected", "public", "return", "short", "static", "strictfp", "super", "switch", "synchronized", "this", "throw", "throws", "transient", "void", "volatile", "while"]; 

    for (var j = 0; j < split.length; j++) { 
     if ($.inArray(split[j], array) > 0) { 
      split[j] = '<span class="code">' + split[j] + '</span>'; 
     } 
    } 

    $("#java").html(split.join(' ')); 
}); 
+0

कूल! क्या आप कृपया '$ .inArray (विभाजन [जे], सरणी) की व्याख्या कर सकते हैं? मुख्य रूप से '$ .inArray' भाग। – Rob

+0

@ माइकड्रिक मेरे संपादन देखें। आप jQuery दस्तावेज़ में स्पष्ट रूप से इसके बारे में अधिक पढ़ सकते हैं। –

+0

ठीक है, आपकी मदद के लिए धन्यवाद। – Rob

2

मैं अपने आप को इस सवाल का कुछ महीने पहले पूछा, मैं इस पाया खोज का एक बहुत बाद:

http://forum.jquery.com/topic/wrapping-specific-words-inside-span-elements#14737000001028912

जो मैं निम्नलिखित jQuery प्लगइन में addapted:

$.fn.applyKeyword = function(opt, selector) { 
    var numOfKeys = opt.keys.length; 

    if (typeof selector == 'undefined') { 
     selector = ":visible:not(:input):not(label):not(select)"; 
    } 

    for (var i = 0; i < numOfKeys; i++) { 
     if (opt.keys[i].partials) { 
      var re = new RegExp("(" + opt.keys[i].keyword + ")", 'ig'); 
     } else { 
      var re = new RegExp("(\\b" + opt.keys[i].keyword + "\\b)", 'ig'); 
     } 
     $(selector, this).contents().filter(function() { 
      return this.nodeType != 1; 
     }).each(function() { 
      var output = $(this).text().replace(re, opt.keys[i].prefix + "$1" + opt.keys[i].suffix); 
      if (output != $(this).text()) { 
       $(this).wrap("<p></p>").parent('p').html(output).contents().unwrap(); 
      } 
     }) 
    } 
} 

यह एक तरह से कीवर्ड रैपिंग 'पूर्ववत करें' की जरूरत नहीं है, लेकिन यह मेरी जरूरतों उपयुक्त है।

आपको एक उदाहरण यह मैं एक बनाने के लिए खुशी होगी कैसे लागू करने के लिए अगर आप कुछ पाठ मैं इस पर .... परीक्षण कर सकते हैं प्रदान करते हैं की जरूरत है

+0

रेगेक्स के उपयोग के माध्यम से तारों के आंशिक मिलान भी कैप्चर कर सकते हैं; यदि आप बहुत सारे कीवर्ड/टेक्स्ट की अपेक्षा करते हैं तो यह थोड़ा भारी हो सकता है। यह उस तत्व का उपयोग करता है जिसका उपयोग आप इसे एक दायरे के रूप में करते हैं ताकि तत्वों को जांचने के लिए सीमित किया जा सके। – sg3s

+0

मुझे यह स्वीकार करना होगा कि यह काफी जटिल है (मैंने एक महीने पहले jQuery का उपयोग शुरू किया था)। मुझे खुशी है कि आपने प्लगइन का उल्लेख किया है क्योंकि मैंने एक सेट अप करने के तरीके पर कई ट्यूटोरियल्स का पालन किया है, लेकिन मुझे नहीं पता कि कैसे "संकलित करें" (यदि यह कोई समझ में आता है)। क्या आप अपनी प्लगइन को '.js' फ़ाइल के रूप में सहेजते हैं और इसे किसी आईडी के' आईडी 'या' कक्षा 'में कॉल करते हैं? – Rob

+0

एक प्लगइन मूल रूप से केवल एक 'संपत्ति' है जिसे आप jQuery ऑब्जेक्ट में जोड़ते हैं; यह सिर्फ एक समारोह होने के लिए होता है ताकि इसे ब्रेसिज़() का उपयोग करके बुलाया जा सके ... यह केवल मूल जेएस है; लेकिन एक प्लगइन चेक कैसे लिखना है, इस बारे में अधिक जानकारी के लिए [यह एक आधिकारिक ट्यूटोरियल के लिए लिंक] (http://docs.jquery.com/Plugins/Authoring) – sg3s

संबंधित मुद्दे