Question

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:

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:

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

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:

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

Answer 1

您可以折叠字符串替换。例如：

'test string'.replace(/e|t|n/g,'')输出s srig。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我找到了解决问题的方法。我将关键字复制到搜索结果顶部的另一个图层中，并使用CSS对齐它们。有了这个，我不仅可以突出匹配词+变音符号，还可以显示缺少的变音符号：

以下是代码：

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

这是css：

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

结果如下：

Highlight Match Words of Two Arabic String (Javascript)

2 个答案: