javascript - वीू जेएस टेक्स्ट हाइलाइट फिल्टर




text formatting (3)

आपको {{{ foo | highlight }}} {{{ foo | highlight }}} 3 ब्रेसेज़ के साथ, 2 {{}} साथ नहीं दो ब्रेसिंग HTML से बच निकलते हैं

मुझे वीएज द्वारा एक टेक्स्ट हाइलाइट फिल्टर लिखने में मदद की ज़रूरत है यह विचार है कि किसी दिए गए सरणी शब्दों के माध्यम से लूप और अगर कोई मैच होता है, तो उस शब्द के एक वर्ग के साथ एक स्पैन लागू करें मेरे पास समस्या यह है कि, मैं Vuejs के साथ html फ़ॉर्मेटिंग के साथ डेटा वापस नहीं पा सकता। किसी भी विचारों की अत्यधिक सराहना की जाएगी मैं वास्तव में इस के साथ अटक गया हूँ।

Vue.filter('highlight', function(words, query){
    //loop through **words** and if there is a match in **query**
   //apply a <span> with some style
   //At the end return formatted string to html page
})

जैसा कि जेफ ने अभी कहा था, मूल मूँछें सादा पाठ के रूप में डेटा की व्याख्या करती हैं।

आप क्वेरी को स्ट्रिंग.रेले प्लेस () पद्धति के स्थान पर स्थानांतरित कर सकते हैं।

यहां एक बुनियादी उदाहरण है: https://jsfiddle.net/0jew7LLz/

Vue.filter('highlight', function(words, query){
    return words.replace(query, '<span class=\'highlight\'>' + query + '</span>')
});

HTML interpolations {{{foo}}} vuejs2.X में v-html निर्देश के पक्ष में हटा दिए गए हैं , इस प्रकार संस्करण 2.x से, Vue.js HTML templating के अतिरिक्त कच्चे जावास्क्रिप्ट टेम्पलेटिंग (प्रतिक्रिया-शैली) के लिए अनुमति देता है ।
@ जेफ का जवाब सही है, लेकिन वीएज 1.x संस्करणों के लिए, लेकिन अगर {{{}}} ने आप के लिए काम नहीं किया है या यदि आप एचटीएमएल में टैग का मूल्यांकन करना चाहते हैं, और विश्वसनीय स्रोत से, उदाहरण के लिए, यदि आप एक <strong></strong> टैग जोड़ना चाहते हैं, तो आपको HTML के रूप में स्ट्रिंग का मूल्यांकन करने के लिए Vue को पूछने के लिए v-html, v-html का उपयोग करना होगा:

<span v-html="$options.filters.highlight(item, val)">{{ item }}</span>

हाइलाइट फ़िल्टर:

Vue.filter('highlight', function(word, query){
  var check = new RegExp(query, "ig");
  return word.toString().replace(check, function(matchedText,a,b){
      return ('<strong>' + matchedText + '</strong>');
  });
});

या आप @ थॉमस फेरो के फिल्टर का उपयोग कर सकते हैं





vue.js