Katemonkey (In Most Places)

Learning JavaScript, Day 13 – String Searches & Reference

One thing that mildly irks me about W3Schools is that it has a streak counter for how many days you've been learning. But it takes the weekend into account for that streak, so, unsurprisingly, I keep resetting my streak.

I'm sorry, the weekends are not for JavaScript. The weekends are for cheesy travelogues and going out to goth club nights.

JavaScript String Search Methods

So these are ways you can search through strings. I'm going to do the same thing I did with the string methods and go through each one with ridiculous examples. Thankfully there are less of these.

Index Of

'indexOf()' gives you the position of the first time it finds what you're looking for.

let sample = `Pikachu, Charmander, Squirtle, 
Bulbasaur, Magikarp, Mimikyu.`;
let magikarp = sample.indexOf("Magikarp");

And, yep, it tells me that Magikarp starts at 42.

And when I do

let sample = `Pikachu, Charmander, Squirtle, 
Bulbasaur, Magikarp, Mimikyu.`;
let eevee = sample.indexOf("Eevee");

it gives me the -1 that I'm supposed to get if it can't find Eevee.

'lastIndexOf()' gives you the position of the last time it finds what you're looking for.

So, this time

let sample = `Pikachu, Charmander, Squirtle, Bulbasaur, 
Magikarp, Mimikyu, Magikarp.`;
let magikarp = sample.lastIndexOf("Magikarp");

gives me 61, because that's where the second Magikarp is sitting.

And if I put a position in, indexOf() counts from that position and then finds it.

let sample = `Pikachu, Charmander, Squirtle, Bulbasaur, 
Magikarp, Mimikyu, Magikarp, Eevee, Slowpoke, Magikarp.`;
let magikarp = sample.indexOf("Magikarp", 50);

That finds the Magikarp at 61, skipping the Magikarp at 42. But it doesn't find the Magikarp at 88, since indexOf only finds the first one after 50.

But give lastIndexOf a position, and it counts back from that position to find it.

let sample = `Pikachu, Charmander, Squirtle, Bulbasaur, 
Magikarp, Mimikyu, Magikarp, Eevee, Slowpoke, Magikarp.`;
let magikarp = sample.lastIndexOf("Magikarp", 50);

This one returns 42, because it's going back from 50, and counting down, that's the 42 Magikarp.

So if I were to have:

let sample = `Pikachu, Charmander, Squirtle, Bulbasaur, 
Magikarp, Mimikyu, Magikarp, Eevee, Slowpoke, Magikarp.`;
let magikarp42 = sample.indexOf("Magikarp");
let magikarp61 = sample.indexOf("Magikarp", 50);
let magikarp88 = sample.lastIndexOf("Magikarp");
document.getElementById("demo").innerHTML = 
magikarp42 + " " + magikarp61 + " " + magikarp88;

I get the locations of all my Magikarps.

Obviously, the middle one requires me to know where the first one is, but if I know that it's at 42, then I can go indexOf("Magikarp", 43), because it's finding the next one.

Alas, I can't do indexOf("Magikarp", magikarp42++). Which would be even easier, because then I wouldn't need to know where the first one is. But it is not happening.

search() is a lot like indexOf() in that you put in what you want, and it returns the position, but it doesn't take a second start position and it lets me use regular expressions.

So I can do

let sample = `Pikachu, Charmander, Squirtle, Bulbasaur, 
Magikarp, Mimikyu, Magikarp, Eevee, Slowpoke, Magikarp.`;
let magikarp = sample.search(/Magikarp/);

String Match

match() lets me get a little wilder, because not only does it find what I'm looking for, it puts it all in an array, and if I use regular expressions, it finds all of them.

let sample = `Charmander, Charmeleon, Charizard, 
Bulbasaur, Ivysaur, Venusaur`;
const sampleArray = sample.match(/char/gi);

When I do sample.match("char") it doesn't find any, because all of them are Char, but when I do sample.match("saur"), it finds the first saur.

So if I put in sample.match(/char/i), it returns Char, because it found the first one.

And if I put in sample.match(/char/gi), it returns Char,Char,Char because it found all three.

And if I add in sampleArray.length, it counts how many times it finds it.

Which means that this

let sample = `Charmander, Charmeleon, Charizard, 
Bulbasaur, Ivysaur, Venusaur`;
const charArray = sample.match(/char/gi);
const saurArray = sample.match(/saur/g);
document.getElementById("demo").innerHTML = 
charArray.length + ": " + charArray + "<br>" + 
saurArray.length + ": " + saurArray;

Returns this

3: Char,Char,Char
3: saur,saur,saur

matchAll() does the same as adding g in a regular expression. Which is why, if you're using it and regular expressions, you need to put the g in. Otherwise, it freaks out.

But it's also an iterator instead of an array, so if you want to see it as an array, you have to add Array.from().

let sample = `Charmander, Charmeleon, Charizard, 
Bulbasaur, Ivysaur, Venusaur`;
const char = sample.matchAll(/Char/g);
const saur = sample.matchAll(/saur/g);
document.getElementById("demo").innerHTML = 
Array.from(char) + "<br>" + Array.from(saur);

I'm not 100% what you do with iterators. So I'm not 100% certain what you do with matchAll()

String Includes

If you just want to know that your string contains what you're looking for, includes() does it.

let sample = `Pikachu, Charmander, Squirtle, 
Bulbasaur, Magikarp, Mimikyu.`;
let magikarp = sample.includes("Magikarp");

I get back a True, because, yes, there is a Magikarp there.

I can't use regular expressions here, so I have to make sure the case is correct, but if I know a position, I can also see if there's an item after a certain point.

let sample = `Pikachu, Charmander, Squirtle, Bulbasaur, 
Magikarp, Mimikyu, Magikarp.`;
let magikarp = sample.includes("Magikarp", 50);

Yes, after 50, there is a Magikarp.

Starts With and Ends With

If you're trying to figure out if a string has the right information in it, you can do startsWith() and endsWith, which return True or False depending on whether or not it's right.

let sample = `Charmander, Charmeleon, Charizard, 
Bulbasaur, Ivysaur, Venusaur`;
let charmon = sample.startsWith("Char");
let saurmon = sample.endsWith("saur");

Both of those return True, because the string starts with Char and ends with saur. But if I did startsWith("Charizard") and endsWith("Bulbasaur"), I'd get both returning False.

These are case-sensitive again.

I can see if the string starts with my phrase after a certain point.

let sample = `Charmander, Charmeleon, Charizard, 
Bulbasaur, Ivysaur, Venusaur`;
let charmon = sample.startsWith("Charmeleon", 12);

Skip ahead 12 characters, does it start with Charmeleon? Yes.

But with endsWith(), it sees if it ends with the phrase within the constraints of the number you put in.

let sample = `Charmander, Charmeleon, Charizard, 
Bulbasaur, Ivysaur, Venusaur`;
let charmon = sample.endsWith("Char", 16);

It counts 16 from the start (and remember that it starts with 0), and if those last characters are Char, it returns True. Which it does in this case, because I'm having it look at Charmander, Char.

String Reference

This is just a nice big list of everything I went through in templates, methods, and search.

There's a small section on HTML wrapper JavaScript methods, where you used to be able to do things like

var sample = "Pikachu";
let result = sample.blink();
document.getElementById("demo1").innerHTML = result;

But, unfortunately, they have all been deprecated, so I can no longer make Pikachu blink.

Shame.

Day 13 — Results

Tomorrow, I start with Numbers. It'll probably be exactly the same as Strings went, so that'll be a lot.

Today's Sticker

A sparkly circular sticker with a black background. There's an illustration of Santa Muerte in the middle (a female saint with a skull for a face), and all around the edge it says

When I went to the goth club night, they gave me a sticker. NICE.

They also played "The Days Of Swine And Roses" by My Life With The Thrill Kill Kult, which was even BETTER.

#kate learns javascript #kate learns web development #programming