जावास्क्रिप्ट: डोम में तार ढूंढें और इसे

पर जोर दें, मुझे एक ऐसा फ़ंक्शन चाहिए जो मुझे कुछ स्ट्रिंग्स मिल जाए जो मुझे डीओएम में एक सरणी में मिला है और इसे जोर दिया है।जावास्क्रिप्ट: डोम में तार ढूंढें और इसे

उदाहरण के लिए।

keywords[0] = 'linux'; 
keywords[1] = 'suse pro';

<body> 
    im a huge fan of <em>linux</em> and at the moment im using <em>suse pro</em> and finds it amazing. 
</body>

कैसे मैं सबसे आसान तरीका में ऐसा करते हैं। अग्रिम धन्यवाद

संपादित करें: मुझे इसे पूरा करने का एक बहुत ही आसान तरीका मिला: jquery हाइलाइट प्लगइन! चियर्स! आदि

आप <em>linux</em> साथ linux की जगह लेंगे,

स्रोत

2009-12-29 ajsie

http://stackoverflow.com/questions/1972409 का डुप्लिकेट की क्रमबद्ध पूछता कैसे PHP में ऐसा करने के लिए, जबकि यह जावास्क्रिप्ट में इसे कैसे करना है इसके बारे में पूछता है। – MatrixFrog

लेकिन फिर यह एक डुप्ली नहीं है। इसकी 2 अलग-अलग भाषाओं :) – ajsie

वहाँ है कि इस करता है एक jQuery प्लगइन है: (एक ही व्यक्ति से) उस सवाल को छोड़कर http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

स्रोत

2009-12-29 03:50:54 Breton

यह शायद सबसे आसान तरीका है, लेकिन शायद नहीं सबसे अच्छा तरीका है: http://www.tizag.com/javascriptT/javascript-string-replace.php (नीचे, जहां यह कहते हैं, "वैश्विक नियमित अभिव्यक्ति समारोह बदलें" के लिए नीचे स्क्रॉल

स्रोत

2009-12-29 01:52:28 MatrixFrog

मुझे लगता है कि एक बेहतर तरीका है। यह पहली बात थी जो दिमाग में आई थी। – MatrixFrog

मुझे इसे कुछ महीने पहले करना था। मूल रूप से किसी ने यहां दूसरों द्वारा सुझाए गए आंतरिक HTML की स्ट्रिंग मैनिपुलेशन का उपयोग किया था, लेकिन वह सड़क पागलपन की ओर ले जाती है। परेशानी कोने के मामले हैं: क्या होगा यदि कीवर्ड चिह्नित किया गया है तो यह तत्व है कक्षा का नाम या आईडी। हम किसी भी एम्बेडेड जावास्क्रिप्ट को उलझाना नहीं चाहते हैं और गलती से अवैध मार्कअप का कारण बनना चाहते हैं। एम्बेडेड को संभालने की भी आवश्यकता है सीएसएस शैलियों। अंत में आप HTML4.0 + ECMAscript + css के लिए एक टेक्स्ट पार्सर लिखना समाप्त कर देते हैं, जो सीमित मामले में भी बहुत काम है - यह अपना स्वयं का वेब ब्राउज़र लिख रहा है - जावास्क्रिप्ट में!

लेकिन हमारे पास पहले से ही वेब ब्राउज़र में एक HTML + JS + CSS पार्सर है जो हमारे लिए एक अच्छा डोम पेड़ उत्पन्न करता है। तो मैंने इसका इस्तेमाल करने का फैसला किया। देखते हैं - जब तक आप चीजों को छान के बारे में सावधान आप कार्रवाई करने के लिए नहीं करना चाहते हैं (उदाहरण के लिए, रिक्त पाठ नोड्स केवल रिक्त स्थान को शामिल कर रहे हैं के रूप में

keywords = ['hello world','goodbye cruel world']; 
function replaceKeywords (domNode) { 
    if (domNode.nodeType === Node.ELEMENT_NODE) { // We only want to scan html elements 
     var children = domNode.childNodes; 
     for (var i=0;i<children.length;i++) { 
      var child = children[i]; 

      // Filter out unwanted nodes to speed up processing. 
      // For example, you can ignore 'SCRIPT' nodes etc. 
      if (child.nodeName != 'EM') { 
       replaceKeywords(child); // Recurse! 
      } 
     } 
    } 
    else if (domNode.nodeType === Node.TEXT_NODE) { // Process text nodes 
     var text = domNode.nodeValue; 

     // This is another place where it might be prudent to add filters 

     for (var i=0;i<keywords.length;i++) { 
      var match = text.indexOf(keywords[i]); // you may use search instead 
      if (match != -1) { 
       // create the EM node: 
       var em = document.createElement('EM'); 

       // split text into 3 parts: before, mid and after 
       var mid = domNode.splitText(match); 
       mid.splitText(keywords[i].length); 

       // then assign mid part to EM 
       mid.parentNode.insertBefore(em,mid); 
       mid.parentNode.removeChild(mid); 
       em.appendChild(mid); 
      } 
     } 
    } 
}

: यह है कि मैं क्या अंत में के साथ आया है उनमें से बहुत सारे, मेरा विश्वास करो) यह बहुत तेज़ है।

अतिरिक्त फ़िल्टरिंग एल्गोरिदमिक स्पष्टता के लिए लागू नहीं की गई - पाठक को एक अभ्यास के रूप में छोड़ दिया गया।

स्रोत

2009-12-29 02:45:54 slebetman

मुझे domNode को किसके साथ बदलना चाहिए? मेरे पास एक आईडी के साथ एक div में पाठ है। – ajsie

@ अज्ञात आप इसे 'replaceKeywords (document.getElementById ("someid") के रूप में आमंत्रित कर सकते हैं) '। @slebetman आप अधिक स्पष्टता के लिए '1'' और '3' स्थिरांक' Node.ELEMENT_NODE' और' Node.TEXT_NODE' के साथ प्रतिस्थापित करना चाहेंगे। –

@ ब्रायन करेंगे। पूरे दस्तावेज़ को संसाधित करने के लिए आप इसे 'replaceKeywords (document.body)' के रूप में कॉल कर सकते हैं, 'ईएम' को अनदेखा करने वाला फ़िल्टर इसे पहले से संसाधित पाठ संसाधित करने से रोक देगा। – slebetman

जावास्क्रिप्ट: डोम में तार ढूंढें और इसे

उत्तर

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