من خیلی وقت پیش وقتی داشتم جاوا اسکریپت تمرین می کردم و سعی می کردم اسکریپت های مختلفی با این برنامه نویسی جالب بنویسم ، به یک چالش برخورد کردم. این چالش بررسی خط به خط متن با استفاده از جاوا اسکریپت بود. به همین دلیل امروز در این مطلب می خواهم راه حل این چالش که برای خودم هم پیش آمده را در اختیار شما بگذارم. این مطلب در قالب یک کدَک به شما ارائه می شود.
کاربرد این کدَک
از آنجایی که در وب بسیاری از فرم ها با استفاده از جاوا اسکریپت بررسی می شوند و صحت مقدار های آن ها توسط جاوا اسکریپت تایید می شود ، ممکن است شما بخواهید یک 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 را قرار داده ام که اطلاعات فرم ارسال نشود تا جاوا اسکریپت وقت داشته باشد و مقادیر را ببرسی کند. برای بهتر متوجه شدن این موضوع ، یک بار این مقدار را پاک کنید و نتیجه را آزمایش کنید.
حال می توانید نتیجه ی نهایی را در لینک زیر مشاهده کنید: