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

我正在使用以下脚本从文本中删除变音符号，并且想知道是否有方法在HTML或PHP中为变音符号添加颜色，而不是将其删除（示例为用阿拉伯语，但犹太人，法国人，甚至英国人也一样......）。在html/PHP中使用javascript更改变音符号颜色

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但第一个答案需要一个固定的文本工作，而第二个答案只是colorizes文本的整个上部。

来源

2017-10-16 Mike

我的回答非常粗糙，如果你说你不想使用“固定文本”，你的意思是绝对位置的文本（我认为你的意思是“固定文本”在感觉你不能动态地输入一些文字）。

所有的说法，你可以做的一件事是有相同的文本位于后面（使用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; 
}

$(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/

您可能注意到，红色的文本创建不幸的是，在调整窗口大小后，红色文本可能会以错误的位置出现。

来源

2017-10-16 21:23:36

谢谢卢克，好主意。我的意思是“不使用固定文本”，我希望它适用于任何给定的文本，段落，书籍......无论如何......我会提出答案并稍等一下，也许有人可能会有一个修复程序，如果我没有回复一段时间，我想我会接受你的答案作为最后一个.. – Mike

我注意到的另一件事：当一个人复制文本时，它会复制两个重复的行。 – Mike

啊，这是一个问题！您可以尝试在文本的红色副本上使用一些CSS，以防止用户意外选择它。看到这里：https://stackoverflow.com/questions/8957443/prevent-copying-text-in-web-page –

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

回答

相关问题