loading...

ابزارها قالب

من خیلی وقت پیش وقتی داشتم جاوا اسکریپت تمرین می کردم و سعی می کردم اسکریپت های مختلفی با این برنامه نویسی جالب بنویسم ، به یک چالش برخورد کردم. این چالش بررسی خط به خط متن با استفاده از جاوا اسکریپت

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 1172 جمعه 09 بهمن 1394 نظرات (3)

من خیلی وقت پیش وقتی داشتم جاوا اسکریپت تمرین می کردم و سعی می کردم اسکریپت های مختلفی با این برنامه نویسی جالب بنویسم ، به یک چالش برخورد کردم. این چالش بررسی خط به خط متن با استفاده از جاوا اسکریپت بود. به همین دلیل امروز در این مطلب می خواهم راه حل این چالش که برای خودم هم پیش آمده را در اختیار شما بگذارم. این مطلب در قالب یک کدَک به شما ارائه می شود.

کاربرد این کدَک

از آنجایی که در وب بسیاری از فرم ها با استفاده از جاوا اسکریپت بررسی می شوند و صحت مقدار های آن ها توسط جاوا اسکریپت تایید می شود ، ممکن است شما بخواهید یک textarea که پر از متن است را بررسی کنید. این textarea می تواند متونی چند خطی داشته باشد و شما باید بتوانید هر خط را بررسی کنید. مثلا شاید بخوانید در متن خود ، خطی که دارای کلمه ی "ایمیل" است را پیدا کنید تا بتوانید ایمیل کاربر را شناسایی کنید یا ...

ابزار آزمایش کد های وب (برای راحتی کار خود از این ابزار استفاده کنید):

خروجی ساز

مراحل بررسی خط به خطر متن با جاوا اسکریپت

برای این کار شما باید ابتدا یک اسکریپت ایجاد کنید. من نام این اسکریپت را line-reader.js می گذارم. این فایل به شکل زیر است:

<<<code>>>

function readLines( textId )

{

   var text = document.getElementById(textId).value,

      text_array = text.split("\n");

   return text_array; // برگرداندن مقدار

}

<<</code>>>

توضیح: در تابع بالا که یکی از توابع فایل جاوا اسکریپت ماست که آی دی textarea مورد نظر ما را می گیرد (textId) و با استفاده از این آی دی مقدار textarea را در متغیر text ذخیره می کند. در قسمت بعد با استفاده از متد split (متد پیشفرض جاوا اسکریپت برای تبدیل رشته به آرایه) متن دریافت شده را از قسمت های n\ می شکند. در نهایت این مقدار که در متغیر text_array ذخیره می شود بازگردانده می شود.

توضیح درباره ی قسمت آبی رنگ: مقدار n\ نمایانگر یک خط پایین تر (new line) است. (با کلید اینتر ایجاد می شود) توجه داشته باشید که این مقدار حتما باید بین " (دابل کتیشن) باشد.

<<<code>>>

function searchInLines( textArray , forSearch )

{

   for( var word in textArray )

   {

      if( textArray[word].indexOf(forSearch) > -1 )

         return word;

   }

}

<<</code>>>

توضیح: در این تابع که برای پیدا کردن متن در خط ها به وجود آمده است ، ابتدا دو مقدار دریافت می شود. مقدار textArray که همان مقدار بازگشتی از تابع قبلی است دریافت می شود. ( این مقدار آرایه ای است از خط های متن )

مقدار دوم (forSearch) کلمه یا عبارتی است که ما در متن به دنبال آن هستیم.

این تابع با دریافت این دو مقدار ، ابتدا حلقه ای را به تعداد اعضای textArray تکرار می کند و در هر بار اجرای حلقه بررسی می کند که آیا مقدار مورد نظر ما (forSearch) در این خط وجود دارد یا نه. اگر وجود داشته باشد ( یعنی مقدار بازگشتی از متد indexOf مقداری به غیر از -1 باشد. )

در نهایت عدد خطی که در آن عبارت مورد نظر ما وجود داشته است از تابع بازگردانده می شود. دقت کنید که عدد خطوط از صفر شروع می شود چون در آرایه های این گونه است. (یعنی اولین خط = 0)

توضیح درباره ی قسمت آبی رنگ: شاید این قسمت برای بعضی ها نا آشنا باشد. این مقدار دقیقا معادل مقدار زیر است. در اصل این روش برای بررسی تمام اعضای یک آرایه کاربرد دارد.

<<<code>>>

var word = 0 ; word < textArray.length ; word++

<<</code>>>

کار ما با کد های جاوا اسکریپت تمام است و الان فقط لازم داریم تا این کد ها را در یک فایل اچ تی ام ال امتحان کنیم تا طرز کار آن ها را ببینیم. پس فایلی با نام index.html ایجاد می کنیم و فرمی برای آن می نویسیم:

<<<code>>>

<script type="text/javascript" src="line-reader.js"></script> <!-- وارد کردن فایل جاوا اسکریپت -->

<form onsubmit="return false;">

<textarea id="testText"></textarea>

<input type="submit" onclick=" alert( searchInLines( readLines('testText'), 'عبارت دلخواه' ) ); " />

</form>

<<</code>>>

در قسمت آبی رنگ من در قسمت onsubmit فرم مقدار return false را قرار داده ام که اطلاعات فرم ارسال نشود تا جاوا اسکریپت وقت داشته باشد و مقادیر را ببرسی کند. برای بهتر متوجه شدن این موضوع ، یک بار این مقدار را پاک کنید و نتیجه را آزمایش کنید.

حال می توانید نتیجه ی نهایی را در لینک زیر مشاهده کنید:

مشاهده ی نتیجه ی نهایی

مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط mhammadreza در تاریخ 7 سال پیش و 18:17 دقیقه ارسال شده است

سلام
اگر من قالب وردپرس رو برای شما ارسال کنم شما میتونید اونو به قالب رزبلاگ تبدیل کنید؟
پاسخ : سلام
بله ولی فعلا وقت نمی کنم. چون عیده معلوم نیست دیگه کی برسم انجامش بدم.

این نظر توسط mohammadreza در تاریخ 7 سال پیش و 16:01 دقیقه ارسال شده است

سلام. یه سوال داشتم . میخواستم بپرسم قالب های وردپرس رو چجوری باید مثل قالب های معمولی در سیستم های وبلاگدهی مثل رزبلاگ استفاده کرد؟ ایا اصلا امکانش هست که به داشتن قالب وردپرس قالبی برای رزبلاگ ساخت؟
ممنون بابت پاسخگوییتون
پاسخ : سلام
بله میشه. برای این کار باید قالب رو بدید به متخصص تا از وردپرس به رزبلاگ ترجمش کنه. البته کاملا واضحه امکاناتی که توی وردپرس هست ولی توی رزبلاگ نیست از قالب باید حذف بشه.

این نظر توسط mohammadreza در تاریخ 7 سال پیش و 16:06 دقیقه ارسال شده است

سلام میخواستم یپرسم مثلا میشه این کد ها رو به قالب قابل استفاده در رزبلاگ تبدیل کرد و یه مقدار دستکاریش کرد تا قابل استفاده بشه؟؟
ممنون میشم کمک کنید
http://s7.picofile.com/file/8243644868/New_Text_Document.txt.html
پاسخ : این کد ها اصلا قالب به حساب نمیان چون css ندارن. شما باید اول کد های css اون ها رو پیدا کنی بعد میشه با یه کم دستکاری یه قالب باهاش درست کرد.


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3195
  • آی پی امروز : 30
  • آی پی دیروز : 94
  • بازدید امروز : 216
  • باردید دیروز : 191
  • گوگل امروز : 3
  • گوگل دیروز : 9
  • بازدید هفته : 1,007
  • بازدید ماه : 9,504
  • بازدید سال : 100,874
  • بازدید کلی : 1,787,309
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص