在 html/PHP 中使用 javascript 更改变音符号颜色

Question

我正在使用以下脚本从文本中删除变音符号，我想知道是否有办法为 html 或 PHP 中的变音符号着色而不是删除它们（示例是阿拉伯语，但同样适用于希伯来语、法语，甚至英语..等）。

Javascript代码：

$(document).ready(function(){

    var bodyText = $('#page_content').html();
    
    function replaceChars()
    {
        newBodyText = bodyText.replace(/َ/gi,'');
        newBodytext = newBodyText.replace(/ً/gi,'');
        newBodyText = newBodyText.replace(/ُ/gi,'');
        newBodyText = newBodyText.replace(/ٌ/gi,'');
        newBodyText = newBodyText.replace(/`/gi,'');
        newBodyText = newBodyText.replace(/ِ/gi,'');
        newBodyText = newBodyText.replace(/ٍ/gi,'');
        newBodyText = newBodyText.replace(/،/gi,'');
        newBodyText = newBodyText.replace(/ْ/gi,'');
        newBodyText = newBodyText.replace(/ّ/gi,'');
    }
    
    
    $('.testMe').toggle(function() {
                     
    replaceChars();
    
    $('#page_content').html(newBodyText);
    $('#actionDiacritics').html('Show');
    }, function() {
    $('#page_content').html(bodyText);
    $('#actionDiacritics').html('Hide');
    });

});

运行演示：http://jsfiddle.net/8jAL8/29/

输入： لاَ توتوعووّبُواٌ مِنْ هذَا:

所需输出示例：

在 Microsoft Word 或 LibreOffice 中有一个选项可以做到这一点，我也找到了 something here 但第一个答案需要一个固定的文本才能工作，第二个答案只是将整个上半部分着色正文。

Answer 1

我的回答很粗暴，如果你说你不想使用"fixed text"你的意思是绝对位置的文本（我假设你的意思是"fixed text" 在某种意义上你不能动态输入一些文本）。

综上所述，您可以做的一件事就是将相同的文本置于红色后面（使用 z-index）。当你想看到红色的变音符号时，你可以像现在一样把前面文字的变音符号去掉。

HTML

<a class="testMe" id="actionDiacritics" style="cursor: pointer;">Highlight</a>

<br /><br />

<span style="font-size: 30pt">
<div id="page_content">
<span id="highlighted_diacritics">
لاَ تَتَعَجَّبُوا مِنْ هذَا
</span>
<span id="unhighlighted_diacritics">
لاَ تَتَعَجَّبُوا مِنْ هذَا
</span>
</div></span>

CSS

#highlighted_diacritics {
    position: absolute;
    z-index:-1;
    color: red;
}

JS

    $(document).ready(function(){

        var bodyText = $('#unhighlighted_diacritics').html();

        function replaceChars()
        {
            newBodyText = bodyText.replace(/َ/gi,'');
            newBodytext = newBodyText.replace(/ً/gi,'');
            newBodyText = newBodyText.replace(/ُ/gi,'');
            newBodyText = newBodyText.replace(/ٌ/gi,'');
            newBodyText = newBodyText.replace(/`/gi,'');
            newBodyText = newBodyText.replace(/ِ/gi,'');
            newBodyText = newBodyText.replace(/ٍ/gi,'');
            newBodyText = newBodyText.replace(/،/gi,'');
            newBodyText = newBodyText.replace(/ْ/gi,'');
            newBodyText = newBodyText.replace(/ّ/gi,'');
        }


        $('.testMe').toggle(function() {

        replaceChars();

        $('#unhighlighted_diacritics').html(newBodyText);
        $('#actionDiacritics').html('Un-highlight');
        }, function() {
        $('#unhighlighted_diacritics').html(bodyText);
        $('#actionDiacritics').html('Highlight');
        });

    });

这是早期的 fiddle：https://jsfiddle.net/8mfgmovj/

您可能会注意到，红色文本在黑色文本周围形成了一条线，不幸的是，在调整 window 大小后，红色文本可能最终出现在错误的位置。

Answer 2

如果您在 <span> 元素中包含变音符号，并将样式设置为您想要的颜色，并在变音符号之前放置一个零宽度 space 字符 (unicode ), 它应该工作。似乎 span 元素不能改变变音符号的颜色，但如果有其他字符先出现，它会。

例如：

<div>
     א<span id = "colored1" style="color:red">&#8203ָ</span>
</div>

这在 Chrome、Opera 和 Edge 中对我有用。在 Firefox 中，零宽度-space 移动了变音符号（对于零宽度来说太多了）但是如果你完全删除它，它可以正常工作。

Answer 3

首先，要从阿拉伯语文本中删除 8 个阿拉伯语 tashkeel，您可以使用以下短行：

const removeTashkel = s => s.replace(/[\u064B-\u0652]/gm,'');

然后您可以像这样使用函数：

console.log(removeTashkel("بِسْمِ اللهِ الرَّحْمنِ الرَّحِيْمِ"));

对于你问题的第二部分，这里有一个简短的函数来为阿拉伯语变音符号（tashkeel 符号“harakat”）着色。

有八 (8) 个基本的阿拉伯语塔什干符号，即：

U+064B  ً Tanwīn Fatiḥ تنوين بالفتح
U+064C  ٌ Tanwīn Ḍamm تنوين بالضم
U+064D  ٍ Tanwīn Kasr تنوين بالكسر
U+064E  َ Fatḥah الفتحة
U+064F  ُ Ḍammah الضمة
U+0650  ِ Kasrah الكسرة
U+0651  ّ Shaddah الشدة
U+0652  ْ Sukūn السكون

要让每个 tashkeel 符号（变音符号）都有自己的颜色，请使用您的阿拉伯语文本调用该函数，如下所示：

let my colouredText = colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا");

// then insert it in your html <div> with:

document.getElementById("your_Div_id").innerHTML = colouredText ;

如果您希望所有 tashkeel 符号（变音符号）具有 相同的 颜色，则将 html 颜色名称作为第二个参数传递给函数，如下所示：

let my colouredText = colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا", "red");

// then insert it in your html <div> with:

document.getElementById("your_Div_id").innerHTML = colouredText ;

这是带有工作示例的函数。

您可以在函数的第 2 行更改用于 8 个变音符号的八 (8) 个颜色名称。

在下面的三 (3) 个示例中；第一个是不同颜色的，第二个是蓝色的，第三个是红色的。

// example

let myText = colorizeTashkeel("بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ")       +'<br><br>'+
         colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا","blue")   +'<br><br>'+
         colorizeTashkeel("ثَلَاثُمِائَةٍ وَأرْبَعَةٌ وَثَلَاثُونَ","red");

document.getElementById("myText").innerHTML = myText;

//=========================================================
function colorizeTashkeel(string, oneColor="") {
let result="",colorTable = ['red','blue','green','DarkOrange','aqua','magenta','BlueViolet','Brown']; // 8 colors for 8 tashkeel vowels
[...string].forEach(char => result += (/[\u064B-\u0652]/.test(char)) ? '<span style="color:' + (oneColor ? oneColor : colorTable[char.charCodeAt() - 1611]) + '">&#8203' + char + '</span>' : char);
return result;
};
//=========================================================

<div id="myText" style="font-size: 40px; font-weight: bold;">

在 html/PHP 中使用 javascript 更改变音符号颜色

Change diacritics color with javascript in html/PHP

html

javascript

php

replace

diacritics