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

Question

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

\n

JavaScript 代码：

\n

$(document).ready(function(){\n\n    var bodyText = $(\'#page_content\').html();\n    \n    function replaceChars()\n    {\n        newBodyText = bodyText.replace(/\xd9\x8e/gi,\'\');\n        newBodytext = newBodyText.replace(/\xd9\x8b/gi,\'\');\n        newBodyText = newBodyText.replace(/\xd9\x8f/gi,\'\');\n        newBodyText = newBodyText.replace(/\xd9\x8c/gi,\'\');\n        newBodyText = newBodyText.replace(/`/gi,\'\');\n        newBodyText = newBodyText.replace(/\xd9\x90/gi,\'\');\n        newBodyText = newBodyText.replace(/\xd9\x8d/gi,\'\');\n        newBodyText = newBodyText.replace(/\xd8\x8c/gi,\'\');\n        newBodyText = newBodyText.replace(/\xd9\x92/gi,\'\');\n        newBodyText = newBodyText.replace(/\xd9\x91/gi,\'\');\n    }\n    \n    \n    $(\'.testMe\').toggle(function() {\n                     \n    replaceChars();\n    \n    $(\'#page_content\').html(newBodyText);\n    $(\'#actionDiacritics\').html(\'Show\');\n    }, function() {\n    $(\'#page_content\').html(bodyText);\n    $(\'#actionDiacritics\').html(\'Hide\');\n    });\n\n});\n    \n

\n

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

\n

输入：\xd9\x84\xd8\xa7\xd9\x8e\xd8\xaa\xd9\x8e\xd8\xaa\xd9\x8e\xd8\xb9\xd9\x8e\xd8\xac\xd9\x91\xd9\x8e \xd8\xa8\xd9\x8f\xd9\x88\xd8\xa7\xd9\x8c \xd9\x85\xd9\x90\xd9\x86\xd9\x92 \xd9\x87\xd8\xb0\xd9\x8e\xd8 \xa7:

\n

\n

所需输出的示例：

\n

\n

在 Microsoft Word 或 LibreOffice 中有一个选项可以做到这一点，我也在这里找到了一些东西，但第一个答案需要固定文本才能工作，第二个答案只是对文本的整个上部进行着色。

\n

Answer 1

我的回答非常粗略，如果当您说不想使用“固定文本”时，您的意思是具有绝对位置的文本（我假设您的意思是“固定文本”），那么它可能无法满足您的要求您无法动态输入某些文本）。

\n\n

话虽如此，您可以做的一件事是将相同的文本放置在红色后面（使用 z-index）。当您想看到红色变音符号时，可以按照与现在类似的方式删除前面文本的变音符号。

\n\n

超文本标记语言

\n\n

<a class="testMe" id="actionDiacritics" style="cursor: pointer;">Highlight</a>\n\n<br /><br />\n\n<span style="font-size: 30pt">\n<div id="page_content">\n<span id="highlighted_diacritics">\n\xd9\x84\xd8\xa7\xd9\x8e \xd8\xaa\xd9\x8e\xd8\xaa\xd9\x8e\xd8\xb9\xd9\x8e\xd8\xac\xd9\x91\xd9\x8e\xd8\xa8\xd9\x8f\xd9\x88\xd8\xa7 \xd9\x85\xd9\x90\xd9\x86\xd9\x92 \xd9\x87\xd8\xb0\xd9\x8e\xd8\xa7\n</span>\n<span id="unhighlighted_diacritics">\n\xd9\x84\xd8\xa7\xd9\x8e \xd8\xaa\xd9\x8e\xd8\xaa\xd9\x8e\xd8\xb9\xd9\x8e\xd8\xac\xd9\x91\xd9\x8e\xd8\xa8\xd9\x8f\xd9\x88\xd8\xa7 \xd9\x85\xd9\x90\xd9\x86\xd9\x92 \xd9\x87\xd8\xb0\xd9\x8e\xd8\xa7\n</span>\n</div></span>\n

\n\n

CSS

\n\n

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

\n\n

JS

\n\n

    $(document).ready(function(){\n\n        var bodyText = $(\'#unhighlighted_diacritics\').html();\n\n        function replaceChars()\n        {\n            newBodyText = bodyText.replace(/\xd9\x8e/gi,\'\');\n            newBodytext = newBodyText.replace(/\xd9\x8b/gi,\'\');\n            newBodyText = newBodyText.replace(/\xd9\x8f/gi,\'\');\n            newBodyText = newBodyText.replace(/\xd9\x8c/gi,\'\');\n            newBodyText = newBodyText.replace(/`/gi,\'\');\n            newBodyText = newBodyText.replace(/\xd9\x90/gi,\'\');\n            newBodyText = newBodyText.replace(/\xd9\x8d/gi,\'\');\n            newBodyText = newBodyText.replace(/\xd8\x8c/gi,\'\');\n            newBodyText = newBodyText.replace(/\xd9\x92/gi,\'\');\n            newBodyText = newBodyText.replace(/\xd9\x91/gi,\'\');\n        }\n\n\n        $(\'.testMe\').toggle(function() {\n\n        replaceChars();\n\n        $(\'#unhighlighted_diacritics\').html(newBodyText);\n        $(\'#actionDiacritics\').html(\'Un-highlight\');\n        }, function() {\n        $(\'#unhighlighted_diacritics\').html(bodyText);\n        $(\'#actionDiacritics\').html(\'Highlight\');\n        });\n\n    });\n

\n\n

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

\n\n

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

\n