پیش نمایش فرم با teaxarea سفارشی

1 هفته پیش
توسط میلاد آپدیت شد
میثم ( 1800 تجربه )
1 هفته پیش

سلام.
فرض کنید فرم زیر رو داریم.

<form method="post">
عنوان
<input type="text" name="t"/>
متـن
<textarea name="x"></textarea>
<button type="submit">ارسال</button>
</form>

حالا من قصد دارم قبل از ارسال فرم یه پیش نمایش به کاربر نمایش بدم. حالا وقتی کاربر توی teaxarea عبارت فرضا تیتر رو تایپ میکنه ، میخوام توی پیش نمایش عبارت

<h2>تیتر</h2>

برگردانده و نمایش داده بشه. در واقع به تگ h2 تبدیل بشه . و همچنین + به تگ b تبدیل بشه. یعنی فرضا + علی + توی پیش نمایش بولد نمایش داده بشه.
اینو چطور می تونم داشته باشم؟؟؟
ممنون.

میلاد ( 145480 تجربه )
1 هفته پیش
تخصص : طراح رابط کاربری - Front-End

یک پنجره ی رویی (modal) بصورت کدهای html درست می کنید، بدون محتوا.
وقتی دکمه ی ارسال زده میشه، ارسال فرم رو متوقف کنید و این پنجره ی رویی به نمایش در میاد.
محتوای textarea رو به کمک querySelector دریافت می کنید و جای محتوای پنجره ی رویی قرار میدین.

میثم ( 1800 تجربه )
1 هفته پیش

سلام @milad
این دو مورد اول مشکلی نیست.
حالا اینو چطور درست کنم؟

محتوای textarea رو به کمک querySelector دریافت می کنید و جای محتوای پنجره ی رویی قرار میدین.

میلاد ( 145480 تجربه )
1 هفته پیش
تخصص : طراح رابط کاربری - Front-End

به کمک خصوصیت زیر، محتوای درون هر برچسبی که بخواید رو می تونید بدست بیارید:
https://www.w3schools.com/jsref/prop_node_textcontent.asp

به کمک همین دستور، محتوای بدست اومده از textarea رو بزارید توی h2 ای که داخل پنجره رویی هستش.

میثم ( 1800 تجربه )
1 هفته پیش

ممنون میشم یه مثال بزنید.
به عنوان مثال این متن توی textarea تایپ شده ، اینو چطور نمایش بدیم؟

سلام. اینجا سایت # راکت # محلی برای پاسخ به سوالات + برنامه نویسان + هست. در # راکت # همه چیز عالیست ....

در واقع سوال من میشه مارک داون ادیتور سفارشی ساز !

میلاد ( 145480 تجربه )
1 هفته پیش
تخصص : طراح رابط کاربری - Front-End

توضیحاتی که تا الان دادم، برای این بود که محتوای textarea رو داخل پنجره ی رویی بصورت پیشنمایش در بیارید.

برای تبدیل متن بر اساس علائم به کدهای html دیگه، راه حلی که به ذهنم میرسه عبارات با قاعده هستش.
شما باید برای هر یک از موارد، یک عبارت با قاعده درست کنید. بعدش متن مورد نظر رو به عبارت با قاعده میدین، هر موردی که یافت کرد رو جایگزین های خودش رو داخلش قرار میده.
در نهایت یک ساختار جدید ایجاد میشه و به نمایش در میاریدش.

میلاد ( 145480 تجربه )
1 هفته پیش
تخصص : طراح رابط کاربری - Front-End

این هم مثالی ساده:

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?"
برای ارسال پاسخ باید وارد سایت شوید