كلمة محددة عندما يكتبها المستخدم تتحول إلى رابط في رياكت

بتاريخ On 20‏/9‏/2024 at 08:10 قال فينيكس العربي:

 

هذه الطريقة تعمل في المعاينة فقط ولكن بمجرد أن أقوم بنشر المقالة يظهر النص في المقالة كنص عادي

هل قمت بحفظ المقالة بعد إستبدال الكلمات بالروابط أم تم حفظها هكذا دون إستبدال ؟

إذا لم يتم حفظها بعد الإستبدال إذا يجب إستخدام الدالة replaceText بالإستبدال :

const replaceText = (text) => {
    const regex = /phoenix/gi; // البحث عن اسم المدونة
    const replaced_text = text.split(regex).join(
      `<a href="/" style="color: blue; font-weight: bold;">phoenix</a>`
    );
    return replaced_text;
  };

  return (   
      <div dangerouslySetInnerHTML={{ __html: replaceText(content) }} />
  );

حيث content هو المتغير الذي يحتوي على المقالة .

أما إذا تم حفظها بعد الإستبدال ففقط يجب إستخدام  dangerouslySetInnerHTML وهي خاصية  لعرض النص كHTML المعدل :

 return (   
      <div dangerouslySetInnerHTML={{ __html: =content }} />
  );

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

هذا هو الكود :

import { useState } from 'react';
import Link from 'next/link';

const BlogEditor = () => {
  const [content, setContent] = useState('');

  const handleChange = (e) => {
    setContent(e.target.value);
  };

  const replaceText = (text) => {
    const regex = /phoenix/gi; // البحث عن اسم المدونة
    const replaced_text = text.split(regex).join(
      `<a href="/" style="color: blue; font-weight: bold;">phoenix</a>`
    );
    return replaced_text;
  };

  return (
    <div>
      <textarea
        value={content}
        onChange={handleChange}
        placeholder="اكتب مقالتك هنا..."
        rows="10"
        cols="50"
      />
      <h3>معاينة المقالة:</h3>
      <div dangerouslySetInnerHTML={{ __html: replaceText(content) }} />
    </div>
  );
};

export default BlogEditor;

هنا أنشأنا الدالة replaceText والتي ستقوم بإستبدال النص الخاص ب phoenix ووضع رابط المدونة بدلا منه . لذلك يرجى وضع رابط المدونة في خاصية href في الدالة .

بعد ذلك إستخدمنا handleChange وهي  الدالة التي تستخدم لتحديث حالة content عند تغيير النص في الـ textarea. 

وهنا إستخدمنا dangerouslySetInnerHTML وهي خاصية  لعرض النص كHTML المعدل في div وذلك لمعاينة المقالة .

وفي النهاية عند الحفظ يرجى إستدعاء الدالة replaceText للتبديل النص إلى رابط قبل حفظها لديك.

حسب ما فهمته فبما أنك تعتمد على  NextJS فيمكنك استخدام حل بسيط يعتمد على تحويل النص المدخل في textarea إلى JSX بحيث تستخدم onChange لتتبع التغيرات في textarea وعندما يقوم المستخدم بكتابة المقالة، يتم التحقق من النص المدخل فيتحقق من وجود كلمة "phoenix" مثلا فإذا كانت الكلمة موجودة، يقوم بتحويلها إلى رابط محدد داخل النص بعدها يعرض النص المعدل في عنصر منفصل وهذا مثال على الجزئية التي تعالج الإشكالية:

import Link from 'next/link';

const processText = (inputText) => {
  const blogName = 'phoenix';
  const blogUrl = '/';

  const parts = inputText.split(new RegExp(`(${blogName})`, 'gi`));

  return parts.map((part, index) => {
    if (part.toLowerCase() === blogName.toLowerCase()) {
      return (
        <Link key={index} href={blogUrl}>
          <a style={{ fontWeight: 'bold', color: 'blue' }}>{blogName}</a>
        </Link>
      );
    }
    return part;
  });
};

لاحظ أنّ  الدالة processText استعملتها هنا بحيث تأخذ النص كمدخل (inputText)، وتبحث عن كلمة "phoenix" داخل النص فإذا وجدتها، تقوم باستبدالها برابط موجه للصفحة الرئيسية مع تنسيق خاص استخدمت هنا اللون الأزرق وخطا عريضا وأما Link فهومستورد من مكتبة next/link ويستخدم لإنشاء الرابط الذي يؤدي إلى الصفحة الرئيسية.

بتاريخ 10 ساعة قال محمد عاطف17:

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

هذا هو الكود :

import { useState } from 'react';
import Link from 'next/link';

const BlogEditor = () => {
  const [content, setContent] = useState('');

  const handleChange = (e) => {
    setContent(e.target.value);
  };

  const replaceText = (text) => {
    const regex = /phoenix/gi; // البحث عن اسم المدونة
    const replaced_text = text.split(regex).join(
      `<a href="/" style="color: blue; font-weight: bold;">phoenix</a>`
    );
    return replaced_text;
  };

  return (
    <div>
      <textarea
        value={content}
        onChange={handleChange}
        placeholder="اكتب مقالتك هنا..."
        rows="10"
        cols="50"
      />
      <h3>معاينة المقالة:</h3>
      <div dangerouslySetInnerHTML={{ __html: replaceText(content) }} />
    </div>
  );
};

export default BlogEditor;

هنا أنشأنا الدالة replaceText والتي ستقوم بإستبدال النص الخاص ب phoenix ووضع رابط المدونة بدلا منه . لذلك يرجى وضع رابط المدونة في خاصية href في الدالة .

بعد ذلك إستخدمنا handleChange وهي  الدالة التي تستخدم لتحديث حالة content عند تغيير النص في الـ textarea. 

وهنا إستخدمنا dangerouslySetInnerHTML وهي خاصية  لعرض النص كHTML المعدل في div وذلك لمعاينة المقالة .

وفي النهاية عند الحفظ يرجى إستدعاء الدالة replaceText للتبديل النص إلى رابط قبل حفظها لديك.

هذه الطريقة تعمل في المعاينة فقط ولكن بمجرد أن أقوم بنشر المقالة يظهر النص في المقالة كنص عادي

يظهر النص في المقالة كعنصر html