Highlight words words of two arabic lines (javascript)

Question

I am making a search engine for the Arabic language, which should highlight the result of the match in red. Given 2 lines:

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

I want to highlight matching words and diacritics in the second line. The first image is the search keyword, the second image is what I hope to achieve:

In the desired image of the result, only matching words and "diacritic / dhabt" will be highlighted. I tried to accomplish this with these codes:

 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,''); } 

And the result:

Then I split, cyclically, and compare for each character, but the result is garbage:

Then I found near zero width: A partially colored Arabic word in HTML format , and after implementing the method, the end result is still not 100% accurate:

Here are my final codes and you need help polishing or advising:

 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

I found a solution for my problem. I duplicate keywords on another layer on top of the search result and align them using CSS. At the same time, not only can I highlight the words of coincidence + diacritic, but also show the missing diacritics:

Here is the code:

 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>'; } } } 

Here's the css:

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

Here is the result:

Answer 2

You can collapse your string replacements. For instance:

'test string'.replace(/e|t|n/g,'') displays 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>