दो अरबी स्ट्रिंग (जावास्क्रिप्ट)

Question

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

Keyword: بِسْمِ ٱلرحمن ٱلرحيم ملك 
Result: بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ 

मैं दूसरी स्ट्रिंग पर मिलान शब्द और डायक्रिटिक्स को हाइलाइट करना चाहता हूं। पहली छवि कीवर्ड खोज करने के लिए है, दूसरी छवि मैं क्या हासिल करने की उम्मीद है है:

वांछित परिणाम छवि में, केवल मिलान किया शब्द और "विशेषक/dhabt" हाइलाइट किया जाएगा।

var keyword = removeDhabt('بِسْمِ ٱلرحمن ٱلرحيم ملك').split(' '); 
var source = 'بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ'.split(' '); 
for(var b=0; b<source.length; b++) { 
    for(var c=0; c<keyword.length; c++) { 
     if(keyword[c]==removeDhabt(source[b])) source[b] = '<red>'+source[b]+'</red>'; 
    } 
} 

$(target).html(source); 

function removeDhabt(s) { 
    return s.replace(/ِ/g,'').replace(/ُ/g,'').replace(/ٓ/g,'').replace(/ٰ/g,'').replace(/ْ/g,'').replace(/ٌ/g,'').replace(/ٍ/g,'').replace(/ً/g,'').replace(/ّ/g,'').replace(/َ/g,''); 
} 

और परिणाम:

तो मैं अलग हो गए, पाश और हर किरदार के लिए की तुलना लेकिन परिणाम कचरा है:

मैं इन कोड के साथ यह पूरा करने की कोशिश की

फिर मुझे शून्य-चौड़ाई वाले योजक के बारे में यहां मिला: Partially colored Arabic word in HTML और तकनीक को लागू करने के बाद nique, अंतिम परिणाम अभी भी% नहीं 100 सही:

var keyword = removeDhabt('بِسْمِ ٱلرحمن ٱلرحيم ملك').split(' '); 
var source = 'بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ'.split(' '); 
for(var b=0; b<source.length; b++) { 
    for(var c=0; c<keyword.length; c++) { 
     if(keyword[c]==removeDhabt(source[b])) { 
      var newSource = source[b].split(''); 
      var e = 0; 
      for(var d=0; d<keyword[c].length; d++) { 
       while(keyword[c][d]!=newSource[e]) e++; 
       newSource[e] = '<red>'+newSource[e]+'&zwj;</red>'; 
      } 
      source[b] = newSource.join(''); 
     } 
    } 
} 

$(target).html(source); 

function removeDhabt(s) { 
    return s.replace(/ِ/g,'').replace(/ُ/g,'').replace(/ٓ/g,'').replace(/ٰ/g,'').replace(/ْ/g,'').replace(/ٌ/g,'').replace(/ٍ/g,'').replace(/ً/g,'').replace(/ّ/g,'').replace(/َ/g,''); 
} 

Answer 1

मैं मेरी समस्या के लिए समाधान मिल गया। मैं खोज परिणामों के शीर्ष पर कीवर्ड को दूसरी परत में डुप्लिकेट करता हूं और उन्हें सीएसएस का उपयोग करके संरेखित करता हूं। इस के साथ, न केवल मैं मैच शब्द + विशेषक हाइलाइट कर सकते हैं, लेकिन यह भी याद आ रही विशेषक दिखाने:

for(var b=0; b<source.length; b++) { 
    for(var c=0; c<keyword.length; c++) { 
     if(removeDhabt(keyword[c])==removeDhabt(source[b])) { 
      source[b] = '<m0><m1>'+keyword[c]+'</m1>'+source[b]+'</m0>'; 
     } 
    } 
} 

यहाँ सीएसएस है:

m0 { 
    color: #3498DB; 
} 
m0 m1 { 
    color: #CC425B; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

यहाँ परिणाम है

कोड यह रहा: मेरी stri में सुधार लाने पर सुझाव के लिए

Answer 2

आप अपने स्ट्रिंग प्रतिस्थापन संक्षिप्त कर सकते हैं:

Here're मेरा अंतिम कोड और आप पॉलिश या सलाह के लिए मदद की जरूरत है। उदाहरण के लिए:

'test string'.replace(/e|t|n/g,'') आउटपुट s srig।

var keyword = removeDhabt('بِسْمِ ٱلرحمن ٱلرحيم ملك').split(' '); 
 
var source = 'بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ'.split(' '); 
 
for(var b=0; b<source.length; b++) { 
 
    for(var c=0; c<keyword.length; c++) { 
 
     if(keyword[c]==removeDhabt(source[b])) { 
 
      var newSource = source[b].split(''); 
 
      var e = 0; 
 
      for(var d=0; d<keyword[c].length; d++) { 
 
       while(keyword[c][d]!=newSource[e]) e++; 
 
       newSource[e] = '<red>'+newSource[e]+'&zwj;</red>'; 
 
      } 
 
      source[b] = newSource.join(''); 
 
     } 
 
    } 
 
} 
 

 
$('#target').html(source); 
 

 
function removeDhabt(s) { 
 
    return s.replace(/ِ|ُ|ٓ|ٰ|ْ|ٌ|ٍ|ً|ّ|َ/g,''); 
 
}

body { 
 
    font-size: 3em; 
 
} 
 
red { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="target"></div>