دالة لتحديد كلمة تبدأ بحرف محدد وتنتهي بحرف محدد داخل <p> وتعطيها className محدد

فينيكس العربي · 30 نوفمبر 2023

أريد دالة في جافاسكريبت أستطيع من خلالها أن أختار كلمة تبدأ بحرف محدد وتنتهي بحرف محدد داخل تاق <p> في الصفحة لإعطائها className محدد

مثلا لو كان النص "مرحبا بكم يا أصدقائي" أستطيع من خلال هذه الدالة أن أختار حرف أ كبداية وحرف ي كنهاية لتقوم هذه الدالة باختيار كلمة "أصدقائي"

ثم أعطي الكلمة كلاس محدد لتحصل الكلمة على خصائص css خاصة

ملاحظة: النص المحدد في الصفحة يتم استدعائه من الباك إند بطريقة ديناميكية هكذا <p>{text}</p>

أرجو ممن يقوم بالإجابة عن سؤالي بأن يقوم بتوضيح الطريقة بمثال

شكرا مقدما

تم التعديل في 30 نوفمبر 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 30 نوفمبر 2023

سأوضح لك الأمر من خلال جافاسكريبت وتسطيع تنفيذ ذلك في React.js بكل سهولة.

سنتعمد على ميثود startsWith وendsWith التابعين للسلاسل النصية في جافاسكريبت، وإليك مثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .highlighted-word {
      color: red; /* أو أي خصائص أخرى ترغب في تطبيقها */
      font-weight: bold;
    }
  </style>
  <title>Highlight Word Example</title>
</head>
<body>
  <p id="dynamicText">مرحبا بكم يا أصدقائي</p>
  <script>
    const highlightWord = (startChar, endChar, className) => {
      // الحصول على عنصر النص في الصفحة
      const paragraph = document.getElementById('dynamicText');

      // التأكد من أن النص موجود
      if (paragraph) {
        // تحويل نص الفقرة إلى مصفوفة من الكلمات
        const words = paragraph.textContent.split(' ');

        // حلق عبر الكلمات للبحث عن الكلمة المناسبة
        for (let i = 0; i < words.length; i++) {
          const word = words[i];

          // التحقق مما إذا كانت الكلمة تبدأ بالحرف المحدد وتنتهي بالحرف المحدد
          if (word.startsWith(startChar) && word.endsWith(endChar)) {
            // إضافة الكلاس المحدد للكلمة
            words[i] = `<span class="${className}">${word}</span>`;
          }
        }

        // إعادة بناء نص الفقرة مع التأكيد على الكلاس المحدد
        paragraph.innerHTML = words.join(' ');
      }
    };

    // استدعاء الدالة مع المعلمات المحددة
    highlightWord('أ', 'ي', 'highlighted-word');
  </script>
</body>
</html>

فينيكس العربي · 1 ديسمبر 2023

بتاريخ 12 ساعة قال Mustafa Suleiman:

سأوضح لك الأمر من خلال جافاسكريبت وتسطيع تنفيذ ذلك في React.js بكل سهولة.

سنتعمد على ميثود startsWith وendsWith التابعين للسلاسل النصية في جافاسكريبت، وإليك مثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .highlighted-word {
      color: red; /* أو أي خصائص أخرى ترغب في تطبيقها */
      font-weight: bold;
    }
  </style>
  <title>Highlight Word Example</title>
</head>
<body>
  <p id="dynamicText">مرحبا بكم يا أصدقائي</p>
  <script>
    const highlightWord = (startChar, endChar, className) => {
      // الحصول على عنصر النص في الصفحة
      const paragraph = document.getElementById('dynamicText');

      // التأكد من أن النص موجود
      if (paragraph) {
        // تحويل نص الفقرة إلى مصفوفة من الكلمات
        const words = paragraph.textContent.split(' ');

        // حلق عبر الكلمات للبحث عن الكلمة المناسبة
        for (let i = 0; i < words.length; i++) {
          const word = words[i];

          // التحقق مما إذا كانت الكلمة تبدأ بالحرف المحدد وتنتهي بالحرف المحدد
          if (word.startsWith(startChar) && word.endsWith(endChar)) {
            // إضافة الكلاس المحدد للكلمة
            words[i] = `<span class="${className}">${word}</span>`;
          }
        }

        // إعادة بناء نص الفقرة مع التأكيد على الكلاس المحدد
        paragraph.innerHTML = words.join(' ');
      }
    };

    // استدعاء الدالة مع المعلمات المحددة
    highlightWord('أ', 'ي', 'highlighted-word');
  </script>
</body>
</html>

شكرا لك أخي على الإجابة التفصيلية

تم التعديل في 1 ديسمبر 2023 بواسطة فينيكس العربي

محمد سعد شحرور · 3 ديسمبر 2023

بالتأكيد، اليك هذا التابع الذي سيقوم بهذه المهمة، وتفصيل الكود موجود كعليقات فوق كل سطر:

function getTextBetweenLetters(text, firstLetter, secondLetter) {
  // قم بايجاد ترتيب الحرف الاول والحرف الثاني في البداية
  const firstIndex = text.indexOf(firstLetter);
  const secondIndex = text.indexOf(secondLetter);

  // تأكد ان كان هذين الحرفين موجودين فعلا
  if (firstIndex !== -1 && secondIndex !== -1) {
    // اذا كانو موجودين، قم بجلب النص بينهما وقم باعادته
    const result = text.substring(firstIndex + 1, secondIndex);
    return result;
  } else {
    // اذا كان أحد الحروف غير موجود قم بطباعة هذا النص وقم باعادة لا شيء
    console.log("One or both letters not found in the text.");
    return null;
  }
}

وهذا مثال على تطبيق التابع والنتيجة التي سيعيدها:

// مثال عملي
const inputText = "This is an example text.";
const result = getTextBetweenLetters(inputText, "i", "e");

console.log(result); // Output: "s is an exampl"

دالة لتحديد كلمة تبدأ بحرف محدد وتنتهي بحرف محدد داخل <p> وتعطيها className محدد

السؤال

فينيكس العربي

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

فينيكس العربي

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد سعد شحرور

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية