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

我正在使用以下脚本从文本中删除变音符号，而我想知道是否有一种方法可以用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，但是第一个答案需要一个固定的文本才能起作用，第二个答案只是使整个文本的上部变色。

最佳答案

我的回答很粗略，如果您说不想使用“固定文本”时，您指的是绝对位置的文本(我认为您指的是“固定文本”，则可能不符合您的要求)无法动态输入一些文本)。

话虽这么说，您可以做的一件事情就是将相同的文本(使用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/

您可能会注意到，红色文本在黑色文本周围创建了一条线，不幸的是，在调整窗口大小之后，红色文本可能会以错误的位置结尾。

关于javascript - 使用html/PHP中的javascript更改变音符号的颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46775536/