پیش نمایش فرم با teaxarea سفارشی
سلام.
فرض کنید فرم زیر رو داریم.
<form method="post">
عنوان
<input type="text" name="t"/>
متـن
<textarea name="x"></textarea>
<button type="submit">ارسال</button>
</form>حالا من قصد دارم قبل از ارسال فرم یه پیش نمایش به کاربر نمایش بدم. حالا وقتی کاربر توی teaxarea عبارت فرضا تیتر رو تایپ میکنه ، میخوام توی پیش نمایش عبارت
<h2>تیتر</h2>برگردانده و نمایش داده بشه. در واقع به تگ h2 تبدیل بشه . و همچنین + به تگ b تبدیل بشه. یعنی فرضا + علی + توی پیش نمایش بولد نمایش داده بشه.
اینو چطور می تونم داشته باشم؟؟؟
ممنون.
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
یک پنجره ی رویی (modal) بصورت کدهای html درست می کنید، بدون محتوا.
وقتی دکمه ی ارسال زده میشه، ارسال فرم رو متوقف کنید و این پنجره ی رویی به نمایش در میاد.
محتوای textarea رو به کمک querySelector دریافت می کنید و جای محتوای پنجره ی رویی قرار میدین.
سلام @milad
این دو مورد اول مشکلی نیست.
حالا اینو چطور درست کنم؟
محتوای textarea رو به کمک querySelector دریافت می کنید و جای محتوای پنجره ی رویی قرار میدین.
به کمک خصوصیت زیر، محتوای درون هر برچسبی که بخواید رو می تونید بدست بیارید:
https://www.w3schools.com/jsref/prop_node_textcontent.asp
به کمک همین دستور، محتوای بدست اومده از textarea رو بزارید توی h2 ای که داخل پنجره رویی هستش.
ممنون میشم یه مثال بزنید.
به عنوان مثال این متن توی textarea تایپ شده ، اینو چطور نمایش بدیم؟
سلام. اینجا سایت # راکت # محلی برای پاسخ به سوالات + برنامه نویسان + هست. در # راکت # همه چیز عالیست ....
در واقع سوال من میشه مارک داون ادیتور سفارشی ساز !
توضیحاتی که تا الان دادم، برای این بود که محتوای textarea رو داخل پنجره ی رویی بصورت پیشنمایش در بیارید.
برای تبدیل متن بر اساس علائم به کدهای html دیگه، راه حلی که به ذهنم میرسه عبارات با قاعده هستش.
شما باید برای هر یک از موارد، یک عبارت با قاعده درست کنید. بعدش متن مورد نظر رو به عبارت با قاعده میدین، هر موردی که یافت کرد رو جایگزین های خودش رو داخلش قرار میده.
در نهایت یک ساختار جدید ایجاد میشه و به نمایش در میاریدش.
این هم مثالی ساده:
const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
const regex = /dog/gi;
console.log(p.replace(regex, '<i>dog</i>'));
// expected output: "The quick brown fox jumps over the lazy <i>dog</i>. If the <i>dog</i> reacted, was it really lazy?"