دالة لتحديد كلمة تبدأ بحرف محدد وتنتهي بحرف محدد داخل <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

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية