CODEWITHSUNDEEP
javascriptcssarabic
Coisox
Coisox

Reputation: 1104

Highlight Match Words of Two Arabic String (Javascript)

I'm doing search engine for Arabic which should highlight match result in red. Given 2 string:

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

I want to highlight match words and diacritics on the second string. The first image is the keyword to search, the second image is what I hope to achieve:

enter image description here

In the desired result image, only matched 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:

enter image description here

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

enter image description here

Then I found about zero-width joiner here: Partially colored Arabic word in HTML and after implement the technique, the final result still not 100% accurate:

enter image description here

Here're my final codes and need you help to polish or advice:

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

Upvotes: 6

Views: 1736

Answers (2)

Coisox
Coisox

Reputation: 1104

I found solution for my problem. I duplicate the keywords into another layer on top of search result and align them using CSS. With this, not only I can highlight the match words+diacritic but also show the missing diacritic:

Here's 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's the result:

enter image description here

Upvotes: 3

Nate
Nate

Reputation: 1276

You can collapse your string replacements. For instance:

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

Upvotes: 3

Related Questions