https://github.com/thecolaber/text2html

Takes text and inserts it into the page as HTML. Pure JS.
https://github.com/thecolaber/text2html

html inserts javascript js

Last synced: about 1 year ago
JSON representation

Takes text and inserts it into the page as HTML. Pure JS.

• Host: GitHub
• URL: https://github.com/thecolaber/text2html
• Owner: TheColaber
• Created: 2020-11-16T15:46:11.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-01-18T01:57:59.000Z (over 5 years ago)
• Last Synced: 2025-02-13T06:47:33.617Z (over 1 year ago)
• Topics: html, inserts, javascript, js
• Language: JavaScript
• Homepage:
• Size: 44.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Text2HTML - PLEASE REPORT BUGS

## Info

Takes text and parces it with your desired options. Useful when not wanting to use DOM Parsers, insertAdjentHTML, and innerHTML.

#### Syntax:

```js

parseHTML(String text, Object options {| Boolean asList, String baseUrls |} )

```

- text - text to parse

- options

  - asList - return data as a list of Nodes. defaults to false.

  - baseUrls - change the base urls in src and href attributes. defaults to "".

#### Example:

```js

document.querySelector(".main").append(

  ...parseHTML(

    `

  


  

    

      

    

      Welcome!

      


      Google!

  


  

    body{

      margin: 0;

      color: white;

      font-size: 60px;

      letter-spacing: 2px;

      line-height: 60px;

      font-family: system-ui;

    }

    .nav{

      width: 100%;

      height: 300px;

      background-color: #2b2b2b;

      display: flex;

      justify-content: center;

      align-items: center;

    }

    a img{

      height: 150px;

    }

  

  

    let a = document.querySelector("a");

    a.addEventListener("click", function (e) {

      if (!confirm("Are you sure you would like to visit google?")) {

        e.cancelBubble = true;

        e.preventDefault();

      }

    });

  

`,

    { asList: true }

  )

);

```

## Supports

This function supports the following:

- Elements

  - Scripts

  - Styles

  - Self-closing

  - Attributes

    - Single quotes

    - Double quotes

    - No quotes

    - No value attributes

- Comments

- Text Nodes