تعبير 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>

<!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.

مجهول

2024-08-03T11:20:00+00:00
المزيد
- رابط مختصر

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

Mustafa Suleiman

2024-08-03T11:41:50+00:00
المزيد
- رابط مختصر

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

مجهول

2024-08-03T12:30:42+00:00
المزيد
- رابط مختصر

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

محمد عاطف

2024-08-03T10:33:15+00:00
المزيد
- رابط مختصر

يمكنك إضافة 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>

مجهول

2024-08-03T10:49:47+00:00
المزيد
- رابط مختصر

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

محمد عاطف

2024-08-03T11:09:28+00:00
2024-08-03T11:18:19+00:00
المزيد
- رابط مختصر

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

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

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

.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>

مجهول

2024-08-03T11:21:31+00:00
المزيد
- رابط مختصر

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

Yusuf A M

2024-08-03T11:03:11+00:00
2024-08-03T11:25:58+00:00
المزيد
- رابط مختصر

اضغط 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>

النتيجة

تطوير الويب

مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.

90.3 ألف متابع

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

التعليقات

اقرأ أيضًا

تطوير الويب