البحث في النصوص - JavaScript String Search

-

بنحكي في هذا الدرس على كيفية البحث في string باستخدام لغة JavaScript. 

بنحكي في هذا الدرس عن الطرق Methods التالية:

  • ()String indexOf
  • ()String lastIndexOf
  • ()String search
  • ()String match
  • ()String includes
  • ()String startsWith
  • ()String endsWith


طريقة indexOf

هنا يتم ارجاع مكان او فهرس (position) التواجد الأول للنص المطلوب البحث عنه في السلسلة:

مثال :

طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak";
document.write( text.indexOf("lareen"));
document.write("<br>");
</script>
</body>
</html> 
النتيجة : 
نفهم شو عملنا. 
تم ارجاع مكان position لأول حرف في الكملة المطلوب البحث عنه وهي حرف l من كلمة lareen ومكان هذا الحرف في position 6
ما تنسى البداية بتكون من الرقم 0 ل position الأول، 1 ل position الثاني وهكذا. 

طريقة lastIndexOf
هنا يتم ارجاع مكان او فهرس (position) التواجد الاخير للنص المطلوب البحث عنه في السلسلة:
مثال 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak lareen";
document.write( text.lastIndexOf("lareen"));
document.write("<br>");
</script>
</body>
</html> 

النتيجة:

لاحظ ان تم ارجاع مكان كلمة lareen الثانية لأنها مكررة مرتين في النص. اذا ما كانت مكرره بتكون النتيجة نفس النتيجة في indexOf

الطريقتين indexOf و lastIndexOf ترجع القيمة -1 في حال كان النص موجود. 

مثال 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak lareen";
document.write( text.lastIndexOf("Jordan"));
document.write("<br>");
</script>
</body>
</html> 

النتيجة:

النتيجة -1 لان كلمة Jordan مش موجودة في النص. 

ارسال parameter مع طريقة lastIndexOf

في حال ارسال parameter مع طريقة lastIndexOf فهذا يعني ان البحث بتم بشكل عكسي. من النهاية الى البداية. 

مثال: 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.lastIndexOf("lareen",15));
document.write("<br>");
</script>
</body>
</html> 

النتيجة : 

الفرق بين هذه النتيجة والنتيجة السابقة ان هون تم البحث من الموقع رقم 15 الى البداية وبالتالي رجع مكان كلمة lareen  من البداية فا مكان اول حرف من كلمة lareen من بداية الجملة يساوي 6. على عكس الطريقة السابقة الي كانت بتم من بداية النص حتى النهاية وكان مكان اول حرف من كلمة lareen في الموقع رقم 18


طريقة ()String search

في هذه الطريقة يتم البحث عن نص معين داخل السلسلة النصية وتعيد موضع المطابقة position of the match:

مثال : 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.search("lareen"));
document.write("<br>");
</script>
</body>
</html> 

النتيجة:

اكيد لاحظت ان الطريقتين ()indexOf  و()search لهم نفس النتيجة. حيث كلاهما يقبل نفس arguments (parameters) ويعيد نفس النتيجة.  

لكن اكيد الطريقتين مختلفتين عن بعض الفرق بينهم ( بنحكي عنهم بالتفصيل في درس لاحق مخصص)


طريقة ()String match

يتم في هذه الطريقة البحث عن تطابق لنص معين باستخدام التعابير regular expression، وتعيد التطابقات، مثل Array object.

شو يعني هذا الحكي. 

نطبق مثال حتى نفهم الموضوع

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.match(/La/g));
document.write("<br>");
</script>
</body>
</html> 

النتيجة :


تمام نفهم شو عملنا. 
استخدمنا regular expression باسم g الي بيعمل على ارجاع جميع التطابقات الموجودة في النص، وفي مثالنا السابق طلبنا ارجاع التطابق مع الاحرف La وبما ان النص بحتوي على تطابقين كانت النتيجة ارجاع array of object تحتوي التطابقات المطلوبة. 
لاحظ ان التطابق حساس case-sensitive لحالة الاحرف يعني بالرغم من وجود الاحرف la لكن حرف l صغير فا ما تم الارجاع. 
النص الموجود داخل طريقة match لا يوضع في اقواس. 
طيب تمام شو لو حذفنا g من النص السابق 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.match(/La/));
document.write("<br>");
</script>
</body>
</html> 
النتيجة ارجاع اول تطابق موجود 
تطبيق match باستخدام gi 
في هذا regexp يتم تطبيق التطابق بحيث تكون غير حساسة case-insensitive لحالة الاحرف 
نفس المثال السابق باستخدام gi 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.match(/La/gi));
document.write("<br>");
</script>
</body>
</html> 
النتيجة (تم ارجاع جميع التطابقات الموجوده بغض النظر عن حالة الاحرف): 
للمزيد حول regular expression انقر هنا 
()String includes
هنا بتكون النتيجة true او false حسب الحالة اذا كان النص موجود بترجع true واذا لا بترجع false 

مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.includes("mlak"));
document.write("<br>");
</script>
</body>
</html> 
النتيجة:
النتيجة true لان كلمة mlak موجوده في النص. 
 
()String includes مع Parameter 
يمكن استخدام Parameter مع هذه الطريقة لتحديد مكان بداية البحث، وهذا Parameter اختياري واذا ما كان موجود بكون القيمة الافتراضية الو تساوي 0  
مثال : 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.includes("mlak",14));
document.write("<br>");
</script>
</body>
</html> 
النتيجة: 
النتيجة false لان البحث بدا من المكان رقم 14 وكلمة mlak تبدأ من 13

طريقة ()startsWith
هنا بتكون النتيجة true او false حسب الحالة اذا كان النص يبدا بالقيمة المرسلة بترجع true واذا لا بترجع false 
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.startsWith("Layan"));
document.write("<br>");
</script>
</body>
</html> 

النتيجة 
لان كلمة Layan موجوده رجع true 

()String startsWith مع Parameter 
يمكن استخدام Parameter مع هذه الطريقة لتحديد مكان بداية البحث، وهذا Parameter اختياري واذا ما كان موجود بكون القيمة الافتراضية الو تساوي 0  
مثال 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.startsWith("Layan",10));
document.write("<br>");
</script>
</body>
</html> 

النتيجة:
هذه الطريقة حساسة لحالة الاحرف case sensitive


طريقة ()endsWith
هنا بتكون النتيجة true او false حسب الحالة، اذا كان النص ينتهي بالقيمة المرسلة بترجع true واذا لا بترجع false 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.endsWith("Layan"));
document.write("<br>");
document.write( text.endsWith("Lareen"));
document.write("<br>");
</script>
</body>
</html> 
النتيجة :
الجملة تنتهي لكملة lareen ولا تبدأ بكلمة Layan 

()String endsWith مع Parameter 
يمكن استخدام Parameter مع هذه الطريقة لتحديد مكان نهاية البحث، وهذا Parameter اختياري واذا ما كان موجود بكون القيمة الافتراضية الو تساوي 0  
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan lareen mlak Lareen";
document.write( text.endsWith("Layan",5));
document.write("<br>");
</script>
</body>
</html> 
النتيجة :