1

تعبير regex لتغير لون الارقام "العربية" في الايات؟

السلام عليكم ورحمة الله وبركاته

ارغب بطريقة لتغيير لون الارقام العربية في الايات الى لون آخر "الاخضر"، قمت بقبل اشهر بسؤال الاخوة وقام بالرد علي بعض الاخوة بارك الله فيهم وتمت بالنسبة للارقام الانجليزية، لكن ارغب الان بتحويل الارقام الى العربية اذا ممكن؟ وطبعا الارقام بدون اقواس بسبب خط الكتابة "العثماني" يزخرف الرقم ويجعله داخل قوس لوحده وبكون مشكور لالكم

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script defer src="index.js"></script>
    <title>Document</title>
    <style>
      p {
        font: 18px/2.5 Verdana;
      }
      .number {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="quran">
      الٓمٓ ١ ذَٰلِكَ ٱلۡكِتَٰبُ لَا رَيۡبَۛ فِيهِۛ هُدٗى لِّلۡمُتَّقِينَ ٢ ٱلَّذِينَ
      يُؤۡمِنُونَ بِٱلۡغَيۡبِ وَيُقِيمُونَ ٱلصَّلَوٰةَ وَمِمَّا رَزَقۡنَٰهُمۡ يُنفِقُونَ ٣
      وَٱلَّذِينَ يُؤۡمِنُونَ بِمَآ أُنزِلَ إِلَيۡكَ وَمَآ أُنزِلَ مِن قَبۡلِكَ وَبِٱلۡأٓخِرَةِ هُمۡ
      يُوقِنُونَ ٤ أُوْلَٰٓئِكَ عَلَىٰ هُدٗى مِّن رَّبِّهِمۡۖ وَأُوْلَٰٓئِكَ هُمُ ٱلۡمُفۡلِحُونَ
      ٥ إِنَّ ٱلَّذِينَ كَفَرُواْ سَوَآءٌ عَلَيۡهِمۡ ءَأَنذَرۡتَهُمۡ أَمۡ لَمۡ تُنذِرۡهُمۡ لَا
      يُؤۡمِنُونَ ٦ خَتَمَ ٱللَّهُ عَلَىٰ قُلُوبِهِمۡ وَعَلَىٰ سَمۡعِهِمۡۖ وَعَلَىٰٓ أَبۡصَٰرِهِمۡ
      غِشَٰوَةٞۖ وَلَهُمۡ عَذَابٌ عَظِيمٞ ٧ 
    </p>
    <script>
      const paragraph = document.getElementById('quran');


      const text = paragraph.textContent;


      // const modifiedText = text.replace(/(\d+)/g, '<span class="number">$1</span>');
      const modifiedText = text.replace(/([\ufd3e\d+\ufd3f])/g, '<span class="number">$1</span>');


      paragraph.innerHTML = modifiedText;
    </script>
  </body>
</html>
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
Mustafa_Suleiman

ما تريده هو استهداف \u0660 إلى \u0669 وهي رموز Unicode للأرقام العربية من ٠ إلى ٩.

وللعلم Unicode هو نظام ترميز عالمي يُستخدم لتمثيل النصوص والحروف والرموز في الحاسوب، وكل حرف أو رمز في Unicode له رمز رقمي خاص به.

لذلك، عند استخدام \u0660-\u0669 في التعبير النمطي، فإنك تخبر الحاسوب بالبحث عن أي رمز يقع بين الرمز \u0660 (الذي يمثل الرقم العربي ٠) والرمز \u0669 (الذي يمثل الرقم العربي ٩).

سيتم الأمر كالتالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script defer src="index.js"></script>
    <title>Document</title>
    <style>
      p {
        font: 18px/2.5 Verdana;
      }
      .number {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="quran">
      الٓمٓ ١ ذَٰلِكَ ٱلۡكِتَٰبُ لَا رَيۡبَۛ فِيهِۛ هُدٗى لِّلۡمُتَّقِينَ ٢ ٱلَّذِينَ
      يُؤۡمِنُونَ بِٱلۡغَيۡبِ وَيُقِيمُونَ ٱلصَّلَوٰةَ وَمِمَّا رَزَقۡنَٰهُمۡ يُنفِقُونَ ٣
      وَٱلَّذِينَ يُؤۡمِنُونَ بِمَآ أُنزِلَ إِلَيۡكَ وَمَآ أُنزِلَ مِن قَبۡلِكَ وَبِٱلۡأٓخِرَةِ هُمۡ
      يُوقِنُونَ ٤ أُوْلَٰٓئِكَ عَلَىٰ هُدٗى مِّن رَّبِّهِمۡۖ وَأُوْلَٰٓئِكَ هُمُ ٱلۡمُفۡلِحُونَ
      ٥ إِنَّ ٱلَّذِينَ كَفَرُواْ سَوَآءٌ عَلَيۡهِمۡ ءَأَنذَرۡتَهُمۡ أَمۡ لَمۡ تُنذِرۡهُمۡ لَا
      يُؤۡمِنُونَ ٦ خَتَمَ ٱللَّهُ عَلَىٰ قُلُوبِهِمۡ وَعَلَىٰ سَمۡعِهِمۡۖ وَعَلَىٰٓ أَبۡصَٰرِهِمۡ
      غِشَٰوَةٞۖ وَلَهُمۡ عَذَابٌ عَظِيمٞ ٧ 
    </p>
    <script>
      const paragraph = document.getElementById('quran');
      const text = paragraph.textContent;


      const modifiedText = text.replace(/([\u0660-\u0669]+)/g, '<span class="number">$1</span>');


      paragraph.innerHTML = modifiedText;
    </script>
  </body>
</html>

التعبير النمطي (/[\u0660-\u0669]+)/g يستهدف الأرقام العربية فقط من \u0660 إلى \u0669.

0
مجهول

بارك الله فيك وجعله في ميزان حسناتك، تم بحمد الله ... لكن اخي سؤالي في حال نسخة ويندوز الانجليزية او الجوال هل سيدعم هذا الترميز؟

1
Mustafa_Suleiman

Unicode هو معيار عالمي، بالتالي جميع أنظمة التشغيل والأجهزة الحديثة، بما في ذلك ويندوز الإنجليزية والهواتف المحمولة، تدعمه بشكل افتراضي.

0
مجهول

تمام، جزاك الله خيراً اخي الكريم، وجعله في ميزان حسناتك

0
moatef

يمكنك إضافة regex جديد لتعديل الأرقام الإنجليزية إلى العربية حيث ال regex الحالي يقوم فقط بتغير الألوان . ويمكنك إستخدام الكود التالي :

var map = ["&\#1776;", "&\#1777;", "&\#1778;", "&\#1779;", "&\#1780;", "&\#1781;", "&\#1782;", "&\#1783;", "&\#1784;", "&\#1785;"]
paragraph.innerHTML = paragraph.textContent.replace(/\d(?=[^<>]*(<|$))/g, function ($0) { return map[$0] });

ولتغير اللون نقوم بتغير color: red; إلى اللون الذى تريده وبما أنك تريد لون أخضر نغيره إلى التالي :

.number {
            color: green;
        }

وهكذا سوف يعمل معك إن شاء الله وإذا لم يعمل فيفضل إرسال الخط و ملف style.css حيث أن التنسيقات لا تعمل والأرقام تظهر باللغة العربية لدي وذلك لأن جهازى يدعم العربية أما الأجهزة التي لا تتدعم العربية فلا تظهر الأرقام باللغة العربية دون التنسيقات .

وهذا هو الكود كاملا :

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script defer src="index.js"></script>
    <title>Document</title>
    <style>
        p {
            font: 18px/2.5 Verdana;
        }


        .number {
            color: green;
        }
    </style>
</head>


<body>
    <p id="quran">
        الٓمٓ 1 ذَٰلِكَ ٱلۡكِتَٰبُ لَا رَيۡبَۛ فِيهِۛ هُدٗى لِّلۡمُتَّقِينَ ٢ ٱلَّذِينَ
        يُؤۡمِنُونَ بِٱلۡغَيۡبِ وَيُقِيمُونَ ٱلصَّلَوٰةَ وَمِمَّا رَزَقۡنَٰهُمۡ يُنفِقُونَ ٣
        وَٱلَّذِينَ يُؤۡمِنُونَ بِمَآ أُنزِلَ إِلَيۡكَ وَمَآ أُنزِلَ مِن قَبۡلِكَ وَبِٱلۡأٓخِرَةِ هُمۡ
        يُوقِنُونَ ٤ أُوْلَٰٓئِكَ عَلَىٰ هُدٗى مِّن رَّبِّهِمۡۖ وَأُوْلَٰٓئِكَ هُمُ ٱلۡمُفۡلِحُونَ
        ٥ إِنَّ ٱلَّذِينَ كَفَرُواْ سَوَآءٌ عَلَيۡهِمۡ ءَأَنذَرۡتَهُمۡ أَمۡ لَمۡ تُنذِرۡهُمۡ لَا
        يُؤۡمِنُونَ ٦ خَتَمَ ٱللَّهُ عَلَىٰ قُلُوبِهِمۡ وَعَلَىٰ سَمۡعِهِمۡۖ وَعَلَىٰٓ أَبۡصَٰرِهِمۡ
        غِشَٰوَةٞۖ وَلَهُمۡ عَذَابٌ عَظِيمٞ ٧
    </p>
    <script>
        const paragraph = document.getElementById('quran');



        const text = paragraph.textContent;



        // const modifiedText = text.replace(/(\d+)/g, '<span class="number">$1</span>');
        const modifiedText = text.replace(/([\ufd3e\d+\ufd3f])/g, '<span class="number">$1</span>');
        paragraph.innerHTML = modifiedText;
        
        var map = ["&\#1776;", "&\#1777;", "&\#1778;", "&\#1779;", "&\#1780;", "&\#1781;", "&\#1782;", "&\#1783;", "&\#1784;", "&\#1785;"]
        paragraph.innerHTML = paragraph.textContent.replace(/\d(?=[^<>]*(<|$))/g, function ($0) { return map[$0] });
    </script>
</body>


</html>
0
مجهول

بارك الله فيك اخوي على الرد، لكن اخي لا ارغب بتعديل الارقام من الانجليزية الى العربية لانها الارقام مكتوبة بالعربية، لكن ارغب بتغيير لون الرقم العربي الى لون آخر

1
moatef

وبارك فيك أخي .

ظننت أنك تريد تغير الأرقام الإنجليزية إلى العربية كما قلت أنك ترغب الان بتحويل الارقام الى العربية اذا ممكن.

ولكن لابئس يمكنك تغير اللون كما أخبرتك عن طريق تغير

.number {
        color: red;
      }

إلى أي لون تريده وكما تريد اللون الأخضر فيمكنك التغير إلى التالي :

.number {
            color: green;
        }

وتغير ال regex إلى التالي لإستهداف الأرقام العربية :

const modifiedText = text.replace(/([\u0661-\u0669]+)/g, '<span class="number">$1</span>');

حيث نطاق الأرقام العربية في نظام unicode هو من u0660 إلي u0669 ولكننا لا نحتاج رقم 0 فيمكننا البدا من u0661 أو يمكنك البدا من u0660 إذا أردت لا مشكلة وهذا هو الكود كاملا :

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script defer src="index.js"></script>
    <title>Document</title>
    <style>
        p {
            font: 18px/2.5 Verdana;
        }


        .number {
            color: green;
        }
    </style>
</head>


<body>
    <p id="quran">
        الٓمٓ ١ ذَٰلِكَ ٱلۡكِتَٰبُ لَا رَيۡبَۛ فِيهِۛ هُدٗى لِّلۡمُتَّقِينَ ٢ ٱلَّذِينَ
        يُؤۡمِنُونَ بِٱلۡغَيۡبِ وَيُقِيمُونَ ٱلصَّلَوٰةَ وَمِمَّا رَزَقۡنَٰهُمۡ يُنفِقُونَ ٣
        وَٱلَّذِينَ يُؤۡمِنُونَ بِمَآ أُنزِلَ إِلَيۡكَ وَمَآ أُنزِلَ مِن قَبۡلِكَ وَبِٱلۡأٓخِرَةِ هُمۡ
        يُوقِنُونَ ٤ أُوْلَٰٓئِكَ عَلَىٰ هُدٗى مِّن رَّبِّهِمۡۖ وَأُوْلَٰٓئِكَ هُمُ ٱلۡمُفۡلِحُونَ
        ٥ إِنَّ ٱلَّذِينَ كَفَرُواْ سَوَآءٌ عَلَيۡهِمۡ ءَأَنذَرۡتَهُمۡ أَمۡ لَمۡ تُنذِرۡهُمۡ لَا
        يُؤۡمِنُونَ ٦ خَتَمَ ٱللَّهُ عَلَىٰ قُلُوبِهِمۡ وَعَلَىٰ سَمۡعِهِمۡۖ وَعَلَىٰٓ أَبۡصَٰرِهِمۡ
        غِشَٰوَةٞۖ وَلَهُمۡ عَذَابٌ عَظِيمٞ ٧ 
      </p>
    <script>
        const paragraph = document.getElementById('quran');



        const text = paragraph.textContent;



        // const modifiedText = text.replace(/(\d+)/g, '<span class="number">$1</span>');
        const modifiedText = text.replace(/([\u0661-\u0669]+)/g, '<span class="number">$1</span>');


        paragraph.innerHTML = modifiedText;
        
    </script>
</body>


</html>
0
مجهول

بارك الله فيك اخوي، قمت بتطبيق كود الاخ الكريم Mustafa Suleiman وتم بحمد الله... جعله الله في ميزان حسناتك

0
thisisyusuf

اضغط Win + R واكتب : charmap

سيظهر مخطط الاحرف ثم حدد نطاق الارقام العربية

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Arabic Digits</title>
    <style>
        .highlight {
            color: blue
        }
    </style>
</head>
<body>
    <p id="quran">
        الٓمٓ ١ ذَٰلِكَ ٱلۡكِتَٰبُ لَا رَيۡبَۛ فِيهِۛ هُدٗى لِّلۡمُتَّقِينَ ٢ ٱلَّذِينَ
        يُؤۡمِنُونَ بِٱلۡغَيۡبِ وَيُقِيمُونَ ٱلصَّلَوٰةَ وَمِمَّا رَزَقۡنَٰهُمۡ يُنفِقُونَ ٣
        وَٱلَّذِينَ يُؤۡمِنُونَ بِمَآ أُنزِلَ إِلَيۡكَ وَمَآ أُنزِلَ مِن قَبۡلِكَ وَبِٱلۡأٓخِرَةِ هُمۡ
        يُوقِنُونَ ٤ أُوْلَٰٓئِكَ عَلَىٰ هُدٗى مِّن رَّبِّهِمۡۖ وَأُوْلَٰٓئِكَ هُمُ ٱلۡمُفۡلِحُونَ
        ٥ إِنَّ ٱلَّذِينَ كَفَرُواْ سَوَآءٌ عَلَيۡهِمۡ ءَأَنذَرۡتَهُمۡ أَمۡ لَمۡ تُنذِرۡهُمۡ لَا
        يُؤۡمِنُونَ ٦ خَتَمَ ٱللَّهُ عَلَىٰ قُلُوبِهِمۡ وَعَلَىٰ سَمۡعِهِمۡۖ وَعَلَىٰٓ أَبۡصَٰرِهِمۡ
        غِشَٰوَةٞۖ وَلَهُمۡ عَذَابٌ عَظِيمٞ ٧
    </p>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const quranElement = document.getElementById("quran");
            const text = quranElement.innerHTML;
            const highlightedText = text.replace(/([\u0660-\u0669])/g, '<span class="highlight">$1</span>');
            quranElement.innerHTML = highlightedText;
        });
    </script>
</body>
</html>

النتيجة