使用JavaScript在HTML/PHP中更改变音符号颜色

Question

使用JavaScript在HTML/PHP中更改变音符号颜色

4

我正在使用以下脚本从文本中删除变音符号，并想知道是否有一种方法可以在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中有这样的选项，我还在这里找到了一些信息，但第一个答案需要固定文本才能工作，而第二个答案只是将整个上部文本着色。

- Mike

同样适用于犹太人哈哈哈，我想你的意思是希伯来语:'D - Adham Zahran

1

没错，已经修正了，谢谢。 - Mike

@Mike 下面提供了一个简单通用的JavaScript函数。希望它有用。 - Mohsen Alyafei

3个回答

1

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

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

你可以像这样使用该函数：

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

针对您提出的第二个问题，这里提供了一个简短的函数来为阿拉伯语的变音符号（tashkeel symbols "harakat"）上色。

基本的阿拉伯语变音符号有八种，分别是：

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 ;

如果你想让所有的塞克尔符号（附加符号）拥有相同的颜色，那么请按照以下方式将html颜色名称作为第二个参数传递给函数：

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

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

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

以下是带有工作示例的函数。

您可以在函数第二行更改用于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;">

- Mohsen Alyafei

1

当然，我希望可以看到更简单的方式。 - Mike

1

@Mike 这是一行代码：const removeTashkel = s => s.replace(/[\u064B-\u0652]/gm,''); 你可以像这样使用它：console.log(removeTashkel("بِسْمِ اللهِ الرَّحْمنِ الرَّحِيْمِ")); - Mohsen Alyafei

1

谢谢，你能否编辑答案并加上它，我对js还有点陌生。谢谢。 - Mike

@Mike，已完成。 - Mohsen Alyafei

代码片段中没有显示显示/隐藏按钮。 - Mike

显示剩余2条评论

0

如果您在样式设置为所需颜色的<span>元素中包含变音符号，并在变音符号之前放置一个零宽度空格字符（Unicode &#8203），则应该可以正常工作。似乎元素无法仅更改变音符号的颜色，但如果首先有其他字符存在，则可以。

例如：

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

这在Chrome、Opera和Edge中对我有效。在Firefox中，零宽度空格将变音符号移动了（所以零宽度有何用），但如果完全删除它，则可以正常工作。

- Avi Rubin

嗨，Avi，欢迎来到SOF，并感谢您的建议。然而，在每个变音符号中添加一个“span”标签的想法并不容易，而且所有文档都是这样编写的，这也会使代码难以阅读。 - Mike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luke Bergenthal · Accepted Answer

我的回答比较简略，如果你说不想使用“固定文本”是指绝对位置的文本（我假设你是这个意思），那么我的回答可能不符合你的要求。所有这些都说完了，你可以做的一件事是在后面用红色将相同的文本放置在背景位置（使用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');
        });

    });

这是一个早期的小提琴：https://jsfiddle.net/8mfgmovj/

你可能会注意到红色文本在黑色文本周围创建了一条线，并且在调整窗口大小后，红色文本可能会出现在错误的位置。