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

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

ارغب في تغيير لون ارقام الايات في موقع للقرآن الكريم، قام احد الاخوة بطرح تعبير يسمى regex، طبعاً ارغب انه يتحول اللون مع القوس حول الاية الى احد الكلاسات في ملف css والمسمى text-secondary

طبعاً هذه الفقرة التي يوجد فيها السورة وارغب بتغيير لون الارقام مع القوس فيها

<p class="text-success lh-lg intro"style="font-family:  'Lateef' !important; font-size: 31px;  text-align: justify;">
عَبَسَ وَتَوَلَّىٰ ﴿1﴾ أَنْ جَاءَهُ الْأَعْمَىٰ ﴿2﴾ وَمَا يُدْرِيكَ لَعَلَّهُ يَزَّكَّىٰ ﴿3﴾ أَوْ يَذَّكَّرُ فَتَنْفَعَهُ الذِّكْرَىٰ ﴿4﴾ أَمَّا مَنِ اسْتَغْنَىٰ ﴿5﴾ فَأَنْتَ لَهُ تَصَدَّىٰ ﴿6﴾ وَمَا عَلَيْكَ أَلَّا يَزَّكَّىٰ ﴿7﴾ وَأَمَّا مَنْ جَاءَكَ يَسْعَىٰ ﴿8﴾ وَهُوَ يَخْشَىٰ ﴿9﴾ فَأَنْتَ عَنْهُ تَلَهَّىٰ ﴿10﴾ كَلَّا إِنَّهَا تَذْكِرَةٌ ﴿11﴾ فَمَنْ شَاءَ ذَكَرَهُ ﴿12﴾ فِي صُحُفٍ مُكَرَّمَةٍ ﴿13﴾ مَرْفُوعَةٍ مُطَهَّرَةٍ ﴿14﴾ بِأَيْدِي سَفَرَةٍ ﴿15﴾ كِرَامٍ بَرَرَةٍ ﴿16﴾ قُتِلَ الْإِنْسَانُ مَا أَكْفَرَهُ ﴿17﴾ مِنْ أَيِّ شَيْءٍ خَلَقَهُ ﴿18﴾ مِنْ نُطْفَةٍ خَلَقَهُ فَقَدَّرَهُ ﴿19﴾ ثُمَّ السَّبِيلَ يَسَّرَهُ ﴿20﴾ ثُمَّ أَمَاتَهُ فَأَقْبَرَهُ ﴿21﴾ ثُمَّ إِذَا شَاءَ أَنْشَرَهُ ﴿22﴾ كَلَّا لَمَّا يَقْضِ مَا أَمَرَهُ ﴿23﴾ فَلْيَنْظُرِ الْإِنْسَانُ إِلَىٰ طَعَامِهِ ﴿24﴾ أَنَّا صَبَبْنَا الْمَاءَ صَبًّا ﴿25﴾ ثُمَّ شَقَقْنَا الْأَرْضَ شَقًّا ﴿26﴾ فَأَنْبَتْنَا فِيهَا حَبًّا ﴿27﴾ وَعِنَبًا وَقَضْبًا ﴿28﴾ وَزَيْتُونًا وَنَخْلًا ﴿29﴾ وَحَدَائِقَ غُلْبًا ﴿30﴾ وَفَاكِهَةً وَأَبًّا ﴿31﴾ مَتَاعًا لَكُمْ وَلِأَنْعَامِكُمْ ﴿32﴾ فَإِذَا جَاءَتِ الصَّاخَّةُ ﴿33﴾ يَوْمَ يَفِرُّ الْمَرْءُ مِنْ أَخِيهِ ﴿34﴾ وَأُمِّهِ وَأَبِيهِ ﴿35﴾ وَصَاحِبَتِهِ وَبَنِيهِ ﴿36﴾ لِكُلِّ امْرِئٍ مِنْهُمْ يَوْمَئِذٍ شَأْنٌ يُغْنِيهِ ﴿37﴾ وُجُوهٌ يَوْمَئِذٍ مُسْفِرَةٌ ﴿38﴾ ضَاحِكَةٌ مُسْتَبْشِرَةٌ ﴿39﴾ وَوُجُوهٌ يَوْمَئِذٍ عَلَيْهَا غَبَرَةٌ ﴿40﴾ تَرْهَقُهَا قَتَرَةٌ ﴿41﴾ أُولَٰئِكَ هُمُ الْكَفَرَةُ الْفَجَرَةُ ﴿42﴾
</p>

تعبير الـ "regex" هو اختصار لـ "Regular Expression" بالإنجليزية، و هو نمط مُحدد يُستخدم للبحث والتحقق من النصوص بناء على أنماط معينة. يتميز تعبير الـ regex بقدرته على تحديد نصوص تطابق نمط محدد، ويُستخدم في العديد من التطبيقات.

تعبيرات الـ regex تحتوي على مجموعة من الأحرف والرموز التي تمثل أنماط معينة، مثل `.` للإشارة إلى أي حرف واحد، و`*` للإشارة إلى تكرار أو عدم تكرار حرف معين، والأقواس المربعة `[ ]` لتحديد مجموعة من الأحرف الممكنة.

من خلال تعريف نمط regex، يمكنك البحث عن نصوص مطابقة في النصوص الأخرى والقيام بالعمليات المناسبة على هذه النصوص بسهولة.

لتحقيق تغيير لون الأرقام مع الأقواس في القرآن الكريم باستخدام regex، يمكنك استخدام JavaScript للبحث عن الأرقام مع الأقواس وتغيير لونها، و يكون الكود بالطريقة التالية:
<!DOCTYPE html>
<html>
<head>
    <style>
        .colored-verse {
            color: blue; /* يمكنك تغيير اللون هنا */
        }
    </style>
</head>
<body>
    <p class="text-success lh-lg intro" style="font-family: 'Lateef' !important; font-size: 31px; text-align: justify;">
        عَبَسَ وَتَوَلَّىٰ (1) أَنْ جَاءَهُ الْأَعْمَىٰ (2) وَمَا يُدْرِيكَ لَعَلَّهُ يَزَّكَّىٰ (3)
        <!-- النص الآخر -->
    </p>

    <script>
        // استهدف النص الذي يحتوي على الأرقام مع الأقواس
        var verse = document.querySelector(".text-success");
        
        // استخدم regex للبحث عن الأرقام مع الأقواس وتغيير لونها
        var coloredText = verse.innerHTML.replace(/\(\d+\)/g, '<span class="colored-verse">($&)</span>');
        
        // قم بتحديث النص بالألوان الجديدة
        verse.innerHTML = coloredText;
    </script>
</body>
</html>

هذا الكود يستخدم JavaScript للبحث عن الأرقام مع الأقواس باستخدام regex وتغيير لونها عبر إضافة عنصر span حول النص المطابق لل regex مع تطبيق الأنماط CSS المحددة في الفئة "colored-verse". يمكنك تغيير اللون عبر تعديل قيمة color في أنماط CSS.

مجهول

2023-11-05T06:14:33+00:00
المزيد
- رابط مختصر

جربتها اخوي على الملف ما زبطت، لا اعلم ما السبب

Chihab Hedidi

2023-11-05T06:41:25+00:00
المزيد
- رابط مختصر

ايش طلع فالايرور

مجهول

2023-11-05T07:54:03+00:00
المزيد
- رابط مختصر

ما طلع error اخوي، انا استخدم html و css boostrap، ما تغير لون ولا اشي نفس ما هو.

Mustafa Suleiman

2023-11-05T11:09:31+00:00
المزيد
- رابط مختصر

تحتاج إلى تعديل الـ regex السابق لديك إلى التالي:

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

بحيث يصبح الكود الكامل كالتالي:

<!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">
      الٓمٓ ﴿39﴾ ذَٰلِكَ ٱلۡكِتَٰبُ لَا رَيۡبَۛ فِيهِۛ هُدٗى لِّلۡمُتَّقِينَ ﴿39﴾ ٱلَّذِينَ
      يُؤۡمِنُونَ بِٱلۡغَيۡبِ وَيُقِيمُونَ ٱلصَّلَوٰةَ وَمِمَّا رَزَقۡنَٰهُمۡ يُنفِقُونَ ﴿3﴾
      وَٱلَّذِينَ يُؤۡمِنُونَ بِمَآ أُنزِلَ إِلَيۡكَ وَمَآ أُنزِلَ مِن قَبۡلِكَ وَبِٱلۡأٓخِرَةِ هُمۡ
      يُوقِنُونَ ﴿4﴾ أُوْلَٰٓئِكَ عَلَىٰ هُدٗى مِّن رَّبِّهِمۡۖ وَأُوْلَٰٓئِكَ هُمُ ٱلۡمُفۡلِحُونَ
      ﴿5﴾ إِنَّ ٱلَّذِينَ كَفَرُواْ سَوَآءٌ عَلَيۡهِمۡ ءَأَنذَرۡتَهُمۡ أَمۡ لَمۡ تُنذِرۡهُمۡ لَا
      يُؤۡمِنُونَ ﴿6﴾ خَتَمَ ٱللَّهُ عَلَىٰ قُلُوبِهِمۡ وَعَلَىٰ سَمۡعِهِمۡۖ وَعَلَىٰٓ أَبۡصَٰرِهِمۡ
      غِشَٰوَةٞۖ وَلَهُمۡ عَذَابٌ عَظِيمٞ ﴿7﴾ وَمِنَ ٱلنَّاسِ مَن يَقُولُ ءَامَنَّا بِٱللَّهِ
      وَبِٱلۡيَوۡمِ ٱلۡأٓخِرِ وَمَا هُم بِمُؤۡمِنِينَ ﴿8﴾ يُخَٰدِعُونَ ٱللَّهَ وَٱلَّذِينَ
      ءَامَنُواْ وَمَا يَخۡدَعُونَ إِلَّآ أَنفُسَهُمۡ وَمَا يَشۡعُرُونَ ﴿9﴾ فِي قُلُوبِهِم مَّرَضٞ
      فَزَادَهُمُ ٱللَّهُ مَرَضٗاۖ وَلَهُمۡ عَذَابٌ أَلِيمُۢ بِمَا كَانُواْ يَكۡذِبُونَ ﴿10﴾ وَإِذَا
      قِيلَ لَهُمۡ لَا تُفۡسِدُواْ فِي ٱلۡأَرۡضِ قَالُوٓاْ إِنَّمَا نَحۡنُ مُصۡلِحُونَ ﴿11﴾ أَلَآ
      إِنَّهُمۡ هُمُ ٱلۡمُفۡسِدُونَ وَلَٰكِن لَّا يَشۡعُرُونَ ﴿12﴾ وَإِذَا قِيلَ لَهُمۡ ءَامِنُواْ
      كَمَآ ءَامَنَ ٱلنَّاسُ قَالُوٓاْ أَنُؤۡمِنُ كَمَآ ءَامَنَ ٱلسُّفَهَآءُۗ أَلَآ إِنَّهُمۡ هُمُ
      ٱلسُّفَهَآءُ وَلَٰكِن لَّا يَعۡلَمُونَ ﴿13﴾ وَإِذَا لَقُواْ ٱلَّذِينَ ءَامَنُواْ قَالُوٓاْ
      ءَامَنَّا وَإِذَا خَلَوۡاْ إِلَىٰ شَيَٰطِينِهِمۡ قَالُوٓاْ إِنَّا مَعَكُمۡ إِنَّمَا نَحۡنُ
      مُسۡتَهۡزِءُونَ ﴿14﴾ ٱللَّهُ يَسۡتَهۡزِئُ بِهِمۡ وَيَمُدُّهُمۡ فِي طُغۡيَٰنِهِمۡ يَعۡمَهُونَ
      ﴿15﴾ أُوْلَٰٓئِكَ ٱلَّذِينَ ٱشۡتَرَوُاْ ٱلضَّلَٰلَةَ بِٱلۡهُدَىٰ فَمَا رَبِحَت تِّجَٰرَتُهُمۡ
      وَمَا كَانُواْ مُهۡتَدِينَ ﴿16﴾ مَثَلُهُمۡ كَمَثَلِ ٱلَّذِي ٱسۡتَوۡقَدَ نَارٗا فَلَمَّآ
      أَضَآءَتۡ مَا حَوۡلَهُۥ ذَهَبَ ٱللَّهُ بِنُورِهِمۡ وَتَرَكَهُمۡ فِي ظُلُمَٰتٖ لَّا يُبۡصِرُونَ
      ﴿17﴾ صُمُّۢ بُكۡمٌ عُمۡيٞ فَهُمۡ لَا يَرۡجِعُونَ
    </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>

وسيتم تعديل اللون كالتالي:

مجهول

حذف بواسطة المستخدم
2023-11-05T11:48:58+00:00
المزيد
- رابط مختصر

مجهول

2023-11-05T16:40:20+00:00
المزيد
- رابط مختصر

بارك الله فيك اخوي، تم وكلشي تمام :) شكراً الك

تطوير الويب

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

91.3 ألف متابع

أطلق موقعك الإلكتروني في دقائق

صمم موقعك كاملا بالسحب والإفلات بدون خبرة برمجية، واحجز مكانك على الإنترنت.

أنشئ موقعك الآن

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

التعليقات

اقرأ أيضًا

تطوير الويب

أطلق موقعك الإلكتروني في دقائق