 Welcome back to the web browser tutorials and first I want to reply to some of the comments you guys left in the previous video and gonna be quick but if you want to skip it I will leave the timecode in the description so you can skip this part. Ok first of all a lot of people were confused on why would you want to get a web browser inside Godot and an excellent way of thinking about this is that you can host your website with news for instance let's say you have a program with some updates and you want to display those updates inside the game itself or the program that you are making so you can keep a website in a server and just keep pushing your updates there as HTML and then use that HTML inside your game. Another use for this could be you know maybe making players able to create some levels and reading those levels from a website you know I created a game which basically reads the folders of your computer and generates a level kind of like a castlevania you could potentially create a game like this but just surfing the web you know each website could be like a different level depending on the elements that you have so every time you have a technology like this the limit is basically your imagination so why am I making this just because we can right like that's why we make all this. I also wanted to make a shout out to Andrew he built a program which is very similar to this one he's also a patreon so I'm really thankful I will leave a link to the tutorial on how to make an RSS feed reader which is really really cool and I really recommend it and yeah some other users here on Reddit commented which is something really cool that there is an SQL plugin for get out so if you are looking to get into more like database stuff with your programs you can do that using this plugin and now let's just jump the video okay so we have our program here like we had it in the last time and now we want to start taking the information outside of their request into data that we can manipulate in HTML we have things which are called tags and I'm not going to do like an HTML tutorial but there look something like this so body and everything inside this content is the body so you have just the opening part of it and the closing part of it and inside those is where you get all the information you need to render your website so for making it easier to read those kind of values I'm going to create a function which is going to specifically read the content of a tag that way I can start navigating every element and getting the content I want if you see here on the website like when it loads like the title of the window is still a web browser but on the page itself there is a title tag which has got an engine free open source to the 3d game engine this is a very long title by the way but yeah so what I'm going to do now is get the information from inside this tag the title tag and get it into the web browser title so let's create this function get tag or for the JavaScript guys over there just inner HTML which is more similar to what you get in just plain JavaScript so first I want to know which tag I'm going to be parsing so what is the name of that tag and the other thing I will need is the HTML like the entire document okay the entire document that we have so this is like just a string with the content okay I'm gonna write pass now so we don't get the error okay this is not the best way of doing it but I think it's the easiest one even if it's confusing I'm going to use rex rex is a way of finding text and getting results from a long string so for instance if you want to find each word like we're doing right now of a tag inside of a longer string you would use it to match so with rex you create a very complex and very weird string that will magically search your tech the text for you if you want to understand a little bit better how rex work I recommend you this talk which is great for understanding it and it covers all the basics unit for now I'm just gonna go with something that I prepared before for myself in other program that I'm working and yeah I'm gonna go with it and before you want to ruin us all the fun yes I am aware rex is not the best way to parse HTML there's a very funny answer in Instagram workflow just talking about some of the cases and some of the problem you might have so I will encourage you to read it as with all the things I'm recommending in this video you have the links in the description so yeah let's continue let's just ignore that we just want to have fun with this program okay don't be so serious okay bar let's see we're gonna get now the restricts rex yeah this is how we start our instance as of course as with everything you can control click it and you have every like you have the description here of how it works and I haven't read this one actually but I invite you to do it and if you find any problem you can always submit some changes to the cutout documentation okay and now I'm gonna use the compile method and it's going to be the start the tag that we want to search and now all these nonsense and again it's a lot to cover for a tutorial so I won't keep you with it but if you're interested be welcome to check it out and by the way this might be super wrong okay if you have a better version just leave a comment and I'm really interested to know a better way to do this even though I know this is not the optimal way I want to get your opinion well I cannot talk and type at the same time okay so here's what we have and now that we compile it I want to get the result which is now that we have like what are the things that we are looking for which basically is something like the beginning of the time the end of the time and I want to get everything inside of it so now I search in the HTML that was sent to this function and if we get a result because sometimes you might not get anything we're gonna return result get string and I'm gonna replace now the tar because the results that we will get from this will also include the tar and I want to replace it just with an empty space and I'm gonna do the same my god this is begging for so many comments but hey it works I hope so I always forget okay so now we should get the result and what happens if we don't get anything like it will like the problem will get an error and I don't like to have many errors like closing my program so I will add just a default value which you can call you know like every time you look at this function since I'm already adding a value here is optional so if you don't provide it it will be just nothing by default so if there is no result I'm just going to return the default default value that we set it's right out when we do the request completed we get all the text which is this so let's save it as the HTML so that way we can use it several times we're going to set our view with the HTML and now I want to let's see let's print and now inner HTML and the tag that I want to get is the title remember it has to be a string the HTML is the same variable and the default I don't want it just just give me anything you get okay let's try it out and let's see if I get the print here like the title okay never set this I'm gonna set it to the main okay get the website and yes the content of the title tag which is there I have it here seems like I failed on replacing the end of the time because I did it like in the opposite way so that should do it let's try it out again and we get the title so I want to change now the title of our window with the title of the website let's do it here remember we can use OS set window title and now we can use this part here so we are setting the title to whatever the website is let's try it out and it works let's try to I don't know let's see if Wikipedia works yeah let's go and we get the title here Wikipedia whenever we have all this ready you can also like set like you don't know you don't have to set the title of the window right if you have an updater and you want to have several tabs with different websites you can do that with a tab view but for now I think you get the idea of how you can get some websites content there's a bunch of things here that you really have to see everything which is contained inside the head tag that should be hidden from the user so another thing that I'm going to do right now is remove the the head part of the document well instead of removing the head I'm just gonna get the body okay of the website about a website is composed by an HTML tag inside there's a head tag and a body tag the body tag is the things that the user sees so here instead of making the rich text label showing all the HTML I'm going to get only the content of the body tag let's see how it looks now we get the code engine website and it failed why let's see okay so I'm opening the website from Firefox and you can click here on be paid view page source and we get the source here and as you can see here they did it they don't have a body tag for this website so we run into our first problem many websites have different syntaxes okay we know we are dealing with HTML 5 because of the dog type here but you know you can write these kind of documents in very different ways and it doesn't have to be perfect the web browsers that we have already they are equipped to deal with all these kind of cases and even if you don't have that tag over there it will know that this is the head and the rest should be the body so moving forward since this website what wait what there is a body there where is the start oh no well maybe they forgot but yeah since this website doesn't have like the proper structure I'm gonna search for one that it does to keep doing that let's search for another website a fun website that many of you may know and this website does have like just a plain and simple body tag so I'm gonna use this as an example okay it's news.ycombinator.com okay so I'm gonna replace the default website with this one and let's see if now our inner HTML thing works and we can see the content of the okay yeah it works yeah I'm only getting the body of the website which is great as you can see the input the line edit is not updating to the value that we have here on the ready so I'm gonna go ahead and add the default URL value which is going to be this one and I'm gonna get the container line edit and the text is going to be the default URL that way whenever I modify this one I know that our element will be updated as well let's try it out to see if it works yes it works okay we have here hacker news which is the name of the website and we have this information here okay that's it for today I'm gonna try to make them a little bit shorter but more regular sorry for the upload schedule it's being crazy but I really want to thank all my patrons for your help I've been having issues with my microphone so I'm trying to sort that out I hope that this recording is working properly if not if you heard some noises in between that's why but yeah thank you very much everyone for all your comments it's been great yeah I really want to thank again my patrons and if you want to contribute there's a link in the description and yeah see you next time bye