जावास्क्रिप्ट: मूल केस रखने वाले सबस्ट्रिंग को हाइलाइट करें लेकिन केस असंवेदनशील मोड में खोज

Question

मैं एक "सुझाव खोज बॉक्स" लिखने की कोशिश कर रहा हूं और मुझे कोई समाधान नहीं मिल रहा है जो मूल मामले को रखने वाले जावास्क्रिप्ट के साथ एक सबस्ट्रिंग को हाइलाइट करने की अनुमति देता है।

उदाहरण के लिए अगर मैं "ca" के लिए खोज मैं एक केस संवेदी मोड में सर्वर साइड खोज और मैं निम्न परिणाम है:

कैलक्यूलेटर

कैलेंडर

ESCAPE

मैं करूंगा सभी पिछले शब्दों में खोज स्ट्रिंग को देखना पसंद है, इसलिए परिणाम होना चाहिए:

सीए lculator

सीए lendar

ES सीए पीई

मैं निम्नलिखित कोड के साथ करने की कोशिश की:

reg = new RegExp(querystr, 'gi'); 
final_str = 'foo ' + result.replace(reg, '<b>'+querystr+'</b>'); 
$('#'+id).html(final_str); 

लेकिन स्पष्ट रूप से इस तरह से मैं ढीला मूल मामले में!

क्या इस समस्या को हल करने का कोई तरीका है?

Answer 1

.replace() के लिए दूसरे तर्क के लिए फ़ंक्शन का उपयोग करें जो समेकित टैग के साथ वास्तविक मिलान वाली स्ट्रिंग देता है। इनपुट के साथhttp://jsfiddle.net/4sGLL/

reg = new RegExp(querystr, 'gi'); 
     // The str parameter references the matched string 
     // --------------------------------------v 
final_str = 'foo ' + result.replace(reg, function(str) {return '<b>'+str+'</b>'}); 
$('#' + id).html(final_str);​ 

JSFiddle उदाहरण::

इसे आजमाएंhttps://jsfiddle.net/pawmbude/

Answer 2

मैं वही काम करता हूं।

आपको एक प्रतिलिपि बनाने की आवश्यकता है।

मैं सभी निचले मामले में डीबी में वास्तविक स्ट्रिंग की एक प्रति स्टोर करता हूं।

फिर मैं क्वेरी स्ट्रिंग के निचले केस संस्करण का उपयोग करके खोज करता हूं या केस असंवेदनशील regexp करता हूं।

फिर परिणाम के भीतर क्वेरी स्ट्रिंग को हाइलाइट करने के लिए मुख्य स्ट्रिंग में परिणामी मिली प्रारंभिक अनुक्रमणिका का उपयोग करें, साथ ही क्वेरी स्ट्रिंग की लंबाई का उपयोग करें।

आप परिणाम में क्वेरी स्ट्रिंग का उपयोग नहीं कर सकते हैं क्योंकि इसका मामला निर्धारित नहीं होता है। आपको मूल स्ट्रिंग के एक हिस्से को हाइलाइट करने की आवश्यकता है।

Answer 3

.match() केस संवेदी मिलान करता है और मामले को बरकरार रखते हुए मैचों की एक सरणी देता है।

var matches = str.match(queryString), 
    startHere = 0, 
    nextMatch, 
    resultStr ='', 
    qLength = queryString.length; 

for (var match in matches) { 
    nextMatch = str.substr(startHere).indexOf(match); 
    resultStr = resultStr + str.substr(startHere, nextMatch) + '<b>' + match + '</b>'; 
    startHere = nextMatch + qLength; 
} 

Answer 4

मुझे इसे प्राप्त करने का सबसे आसान तरीका मिला है।जावास्क्रिप्ट नियमित अभिव्यक्ति मेल खाने वाली स्ट्रिंग को याद करती है। इस सुविधा का उपयोग यहां किया जा सकता है।

मैंने कोड को थोड़ा सा संशोधित किया है।

function str_highlight_text(string, str_to_highlight){ 
    var reg = new RegExp(str_to_highlight, 'gi'); 
    return string.replace(reg, function(str) {return '<span style="background-color:#ffbf00;color:#fff;"><b>'+str+'</b></span>'}); 
} 

और आसान के साथ

reg = new RegExp("("+querystr.trim()+")", 'gi'); 
final_str = 'foo ' + result.replace(reg, "<b>&1</b>"); 
$('#'+id).html(final_str); 

Answer 5

अच्छा परिणाम याद करने के लिए ... user113716 को THX: https://stackoverflow.com/a/3294644/2065594

Answer 6

अन्य उत्तर अब तक साधारण लग रहे हैं, वे वास्तव में नहीं किया जा सकता है कई वास्तविक दुनिया के मामलों में क्योंकि वे उचित टेक्स्ट एचटीएमएल से बचने और RegExp भागने को संभाल नहीं पाते हैं।

function highlightLabel(label, term) { 
    if (!term) return [ document.createTextNode(label) ] 
    const regex = new RegExp(term.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi') 
    const result = [] 
    let left, match, right = label 
    while (match = right.match(regex)) { 
    const m = match[0], hl = document.createElement('b'), i = match.index 
    b.innerText = m 
    left = right.slice(0, i) 
    right = right.slice(i + m.length) 
    result.push(createTextNode(left), hl) 
    if (!right.length) return result 
    } 
    result.push(createTextNode(right)) 
    return result 
} 

Answer 7

ES6 संस्करण

const highlight = (needle, haystack) => 
    haystack.replace(new RegExp(needle, 'gi'), str => `<strong>${str} 
</strong>`)