在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文本的整个上部。
答
我的回答非常粗糙,如果你说你不想使用“固定文本”,你的意思是绝对位置的文本(我认为你的意思是“固定文本”在感觉你不能动态地输入一些文字)。
所有的说法,你可以做的一件事是有相同的文本位于后面(使用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/
您可能注意到,红色的文本创建不幸的是,在调整窗口大小后,红色文本可能会以错误的位置出现。
谢谢卢克,好主意。我的意思是“不使用固定文本”,我希望它适用于任何给定的文本,段落,书籍......无论如何......我会提出答案并稍等一下,也许有人可能会有一个修复程序,如果我没有回复一段时间,我想我会接受你的答案作为最后一个.. – Mike
我注意到的另一件事:当一个人复制文本时,它会复制两个重复的行。 – Mike
啊,这是一个问题!您可以尝试在文本的红色副本上使用一些CSS,以防止用户意外选择它。看到这里:https://*.com/questions/8957443/prevent-copying-text-in-web-page –