突出显示两个阿拉伯字符串的匹配词 (Javascript)

Question

我正在做阿拉伯语搜索引擎，它应该以红色突出显示匹配结果。给定 2 个字符串：

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

我想突出显示第二个字符串上的匹配词和变音符号。第一张图是要搜索的关键词，第二张图是我希望达到的效果：

在想要的结果图片中，只有匹配的词和"diacritic/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 实施该技术后，最终结果仍然不是 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

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

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

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

结果如下：

突出显示两个阿拉伯字符串的匹配词 (Javascript)

Highlight Match Words of Two Arabic String (Javascript)

javascript

css

arabic