HTML Example

by Manpreet Singh

HTML

You can write plain text right here and it will appear in the result. No HTML tags needed to do this!

<h1>However, an h1 tag will make a heading like this!</h1>
<p>A p tag will make a paragraph</p>
<p>Images are a bit more complex. The location of the image needs to be put in a part of the tag called the src (short for source) attribute.</p>
<img src="http://bideowego.com/favicon.ico"/>

<p>Here is a button</p>
<button>I do nothing...</button>

<p>Here is a button linked to JavaScript code</p>
<button id="button">Click me! I run JavaScript code.</button>

<p class="styled">HTML is very plain by it self, so CSS is used to style it and make it pretty! This p tag is linked to CSS that changes the font to cursive.</p>

<p>There are many
    <a href="http://www.w3schools.com/html/default.asp" target="_blank">HTML tags</a>
 with different purposes, lots of ways to style with
    <a href="http://www.w3schools.com/css/default.asp" target="_blank">CSS</a>
 and tons of things you can do with
    <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a>!
</p>

<p>If you want to mess around with the code, go ahead! The click Run to test it out! You can also create a FREE account and make your own fiddles!</p>

CSS

.styled {
    font-family: cursive, sans-serif;
}

JavaScript

let regex = /<img[^>]+src="([^">]+)/;
sectionContent= "<img src=\"abc.jpeg\">";


/*     console.log("regex==",regex.exec(sectionContent));
    this.contentImageService
        .getImageBlobsForImageElements(imgs)
        .subscribe((blobWithIndex) => {
          if (blobWithIndex.index !== -1) {
            const url = URL.createObjectURL(blobWithIndex.blob);
            console.log(sectionContent.match(regex)[1]);
            sectionContent = sectionContent.replace(sectionContent.match(regex)[1],url);
          }
        }); */
        let url = "test";
        console.log(sectionContent.match(regex));
    sectionContent = sectionContent.replace(sectionContent.match(regex),url);
    console.log("changed section content" + sectionContent);
/*     this.editorContent = sectionContent;
    this.displayEditor = true; */