Well, this is below this video you'll learn how to do a string manipulation using JavaScript. Let's start by taking a look at what you're learning how to recreate this video.
Yes, you can enter a name and we will press extract name that's going to extract the first name, last name, along with the number of characters. And I want to make sure that we can work on anything.
It's a fighter William Smith. We can also find it's going to extract the first name and last name long with the number of characters.
And the reason this, this can be possible is because we are going to interest space between the first name and last name, so look for the space.
Everything to the love to the space. We first name everything to the ride will be last time. Okay, well let's get started here. The first thing I'm going to do is open up
notepad. Another good editor would be Word Pad. But what you would want to avoid to be an editor like Microsoft Word, which is going to insert special characters into the document want to start off by inserting a kind of three tag.
Somebody say string.
Manipulation. And then I'll go ahead and close by, or three tag.
ramen to do is keep making some changes in notepad and I will take a look at it in my browser and keep refreshing as I go along. So let me go ahead and start right away, come up here to file.
I'm going to go to Save As. And there's three things there. We need to make sure I know where I saved them. It's the same know the folder here called a tab. I'm going to have it in with HTML.
It actually I'm gonna call this one string.
Let me just pull this up right here. String extraction to that HTML. So I'm going to specify the path and folder.
I'm going to give it a filename I'm gonna call mine string extraction to the one we're looking at what's called string extraction and then I'll put make sure it ends with HTML HyperText Markup Language and it's a text document and impress them.
Okay. So at this point we will look next to an extraction plan. I will take a look at string extraction to someone simply come up here to file open
I'm going to slide string extraction to and hip opener. And another way to do would be to simply right click on the file and open with and I could pick any browser Firefox, Chrome Internet Explorer Microsoft Edge.
Okay, so anyway, let me go ahead and open it up there. So here we go. That's all we've got so far. So I had a three tag strong deflation and now I'm going to do, let's come back here and that's working.
Well, we're gonna have to create a form. So, we can have the text box and the command button everything else we need to give this form and then once we call it form one the number. Go ahead and close that one.
Okay, up here, we're going to insert a name.
And then this is we're gonna allow the user to input.
Some information. It's gonna be a text box and it didn't give it a name. I'm just going to call this up complete name,
I want to mention the summertime JavaScript is case sensitive, so I get to my we're starting to form for us, but eventually get to JavaScript. When I access this
There is, it's all lowercase except a capital M, as long as you're consistent
It doesn't matter when you create your own User Defined Names. If you want to give it a size and then when sometimes when all you do is give it a value.
This way, when I first kind of developing in the dragon. I don't have to keep entering data because it's already stored there for them. I tell you what, let's go ahead and Cygnus
So I'm just gonna go File, Save within notepad and we come in my browser and I typically will use the keyboard shortcuts I control are
Sometimes I didn't hit to control how five which will force the religion of every guest and I've got a text box with some name and these will be able to when I'm finished with this typically I will erase that integration.
Ok now we put a paragraph break
Then we'll go ahead and put an input box in the fact or command button type equals that.
They are you those
extract them and that's where it's going to appear on the command line.
And then when I click it. I'm going to call extract and pretty close. Pretty close, and close
Let me go ahead and do one more here. The last one with the forum, a text area name because I'm gonna call it my output. There's a capital.
Specify the rose, it will say,
Hey in double quotes the columns.
Are close
Close by text area tag.
Okay, I think that's looking pretty good here.
At this point, I'm gonna go ahead and file say, Come to my browser and refresh me I
Was wondering if it's like it needs to be rose plural groves equals eight. We come up here to File, Save.
And now let's refresh this box here just a little bit bigger than they are we going to look much better. Okay. At that point with this point, we're now ready to start working on the JavaScript that was just created or HTML form. So now I'm going to come up here to the top.
Script language.
Equals JavaScript.
I'm going to close my script. Before I forget,
Okay, what I'm going to do is create a function. So we created. It's called extract. So when I press on this command been it's going to look for a function called extract some that come up here on the type extract
There we go on pregnancy close percent. See, I'm restarting my function. The number close my function here at this point, let's just go ahead and put a test message here. So the document.
Form on my form that's not enough. As long as you're consistent here. But that's for one
On one to my output there is the capital. So I put a capital here. We're put a cap on here type
Equals and we're just going to put test double quotes in a semi colon. So this point, I'm going to go ahead and save it.
And come down here to my browser. I'm going to press on the refresh button and I'm going to press extract name.
And sure enough, it's displaying test. Okay, well, we wanted to build more than that. But that's the first step, just kind of slowly build this application because what's going on with JavaScript.
We're all mistake and nothing happens. So it's kind of nice. If you can limit it down to one line where it stopped working.
So next step. I'm gonna do is I create some variables on the Create one called complete name, just like I did a second ago. And then, actually, I will take this information and placed into this variable.
And when I create one called first name.
Last name.
We create one called space position.
And one home.
Okay, so the first step. I'm gonna do is I'm going to read the information from my form. Form one completely solicited store into a variable with the same name. So I'm going to go document.
For one
Complete name that value and all that's going to do is take the information from this text box and it's going to store it in the variable complete them.
At this point, I need to extract on the space position, but before doing so let me just add one thing here. Let's do slashes will become it so they will be ignored 378
Okay, that should be in love.
Okay, we want to make sure that it works. We're going to make it work on any name. Well, as an example, we're going to work on my name though rest of here.
So the first thing I want to extract the first time I got to find this space. Well, how am I going to find that. Let me go space position. So that was this variable, just to clarify, and it's equal to
Complete name index with a capital.
This is a built in function index with like complete name, as long as I was consistent I going to make this lowercase in this lowercase in
Lowercase and and everything will work fine. But this is not a user defined variable its ability entertain and it's got to be with a capital.
So what's going to happen is after this line is return space position is going to have the value of poor with JavaScript. We start with zero the first character 1234 so I'm going to find my space position zero. So I want to extract the person then
I can just simply go complete name, take a sub string.
And I can specify. Okay, where am I going to start on the starting position zero. And I'm going to get space position characters.
Okay, someone starting position zero and space position would have been set for Saman extract 1234. So let me get my person. Okay, now getting the last name.
Under the sense that completely complete name that substratum
In this case, I'm going to go space position plus one.
Get a common space and position for me to go one plus one is fine. And I'll start extracting from them and what I should have done was kind of almost typed in more than I like to type them without tested. Let's go ahead and first of all and skin type of person that
has saved us
And said, we come to my browser and I'm gonna hit refresh it makes sure extracts the person. Great. I'm now going to come along and change this to a last name.
I'm gonna say what
I reckon press control us
What me go to my browser refresh and extracting great so I can see it's working on the first and the last day. Now what we're going to do is create a long string that holds all this information and display.
So I'm gonna go ahead and say temps writing is equal to, first name. I'm gonna put a space there was
Actually going to graph.
So it's been always. This is a static stream is always going to display. Maybe I'm not sure if I had a cool and they're not. But it's going to spike first name in this space. So I'm going to grab the first form. And now what I'm gonna do is put a new line.
So that way, that information. The next time I type in the information that's going to go the next time. Now, let's say, Tim string is equal to come string, plus some to take what was intended string and congenital that contains
Don't want to go ahead, first name dot last name at some built in routine plus
Care loops in the space characters.
Now I'm going to put two new ones.
In a semi colon. Okay. The first one is going to rub it on one frame that one one, then the next one will actually create the blank mom. So let's go ahead and now I'm going to choose this to chumps room.
What's going to happen is of extract the first name, last name on the crank this variable attempt strength, that's going to be able to the static stretching
First Name plus folders in there. Plus, philosophy, they don't want to take what's in terms and concatenate it contains the length of first name, plus the number of characters on I'll go ahead and write the song. So let's go ahead and say that
Back to the browser refresh extracting the perfect first name is
We put a column there.
And show their, their second ago. Let's go with a first name on I'll even say this
Looks
The same
And refresh.
Here. There we go. Person, though, it contains four characters. Okay, this point we're ready to start working on floss next one we can do
We can take these two lines here. We can talk it we have to be careful. We have to be careful because I spoke to change this to the last name.
And there's a couple of things here, what's going to happen. This one right here is going to simply
Take this information and replace anything that was already in template with just this information, what I want to do is say, Tim strength was last name. And I'm going to go ahead and get last name.
And it contains.
Last Name Caitlyn okay so i think percent here and so good. Tim stringer was last name. Let's go ahead and check it out, come up here to File, Save.
Come back to my browser refresh. And sometimes the mega second cash. If that happens, it's going to vary from one project to the next and Firefox.
Control app thought is going to force the lead on, it looks like everything is working for a picture. Let me just go ahead and check the gospel, William, it will just check make sure it's working there great willing seven
Okay so peers isn't working things to look for again index. That's a cap. It's case sensitive. Make sure your command and with semi colons.
Make sure you closed your, your you've started your script you closed your script to get jobs spelled correctly.
Who knows one little mistake and thanks for working. I'm sure if you spend just a few medicine, you gotta figure out your but hopefully in this video again, you learn how to do a little string manipulation using JavaScript. I'll catch you next time. Thanks.