在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更改變音符號顏色

回答

相關問題