Guide on generating virtual nodes from a string containing HTML tags using Vue 3

Question

Guide on generating virtual nodes from a string containing HTML tags using Vue 3

Investigation

I stumbled upon this solution for converting a simple SVG with one path layer into Vue2 vnode list and wanted to adapt it for Vue3.

After scouring resources, including the MDN docs, I couldn't find any pre-existing solutions. So, I decided to piece together my own based on my knowledge of Vue.

My Objective

I am looking for a method to translate an HTML string that contains a hierarchy of nodes into Vue Nodes.

javascript vue.js vuetify.js html-parsing

Answer 1

Answer №1

My Solution

I implemented a recursive algorithm to traverse through the string, extract all nodes, and then add them to an array of vNodes that eventually bind together to form a single root node.

const parseHTML = (props, context) => {
  let {content} = props

  const div = document.createElement('div')
  div.innerHTML = content
const getAttributes = (node) => {const attrs = {}; for (const attr of node.attributes) attrs[attr.name] = attr.value; return attrs;}
  const convertToNodes = (nodes) => {
    return Array.from(nodes).map(element => {
      if (element.nodeType === 3) return h('span', element.nodeValue)

      if (element.childNodes.length)
        return h(element.tagName, getAttributes(element), convertToNodes(element.childNodes))

      return h(element.tagName, getAttributes(element), element.innerHTML)
    })
  }
  const vNodes = convertToNodes(div.childNodes)

  return h(`div`, {...context.attrs}, vNodes)
}

This function is enclosed within a functional component that can be included in a template:

// parseHTML.ts
import { h } from 'vue'

const parseHTML = (props, context) => {
  let {content} = props

  const div = document.createElement('div')
  div.innerHTML = content
const getAttributes = (node) => {const attrs = {}; for (const attr of node.attributes) attrs[attr.name] = attr.value; return attrs;}
  const convertToNodes = (nodes) => {
    return Array.from(nodes).map(element => {
      if (element.nodeType === 3) return h('span', element.nodeValue)

      if (element.childNodes.length)
        return h(element.tagName, getAttributes(element), convertToNodes(element.childNodes))

      return h(element.tagName, getAttributes(element), element.innerHTML)
    })
  }
  const vNodes = convertToNodes(div.childNodes)

  return h(`div`, {...context.attrs}, vNodes)
}

parseHTML.props = ['content']

export default parseHTML

<template>
<parseHTML :content="myContent"/>
</template>
<script setup>
const myContent = "<div><p>Hello <button>Click!</button> some more text</p><p><em>cursive <strong>and bold</strong> stuff</em></p></div>"
</script>

The parseHTML render function allows you to manipulate nodes as needed. In my scenario, I transformed a basic button generated by Tiptap into a customized Vuetify VBtn.

By inserting the following code after checking for a #text node, I successfully added a Vuetify button based on specific criteria:

...
      if (element.attributes.getNamedItem('data-id')?.value === 'richTextBtn')
        return h(VBtn, {onClick($event) { alert('hello!')}}, [element.innerHTML])
...

Looking Ahead

I trust this information will aid others facing similar challenges. Your feedback and alternative solutions are welcomed and appreciated!

Answer 2

My Solution

I implemented a recursive algorithm to traverse through the string, extract all nodes, and then add them to an array of vNodes that eventually bind together to form a single root node.

const parseHTML = (props, context) => {
  let {content} = props

  const div = document.createElement('div')
  div.innerHTML = content
const getAttributes = (node) => {const attrs = {}; for (const attr of node.attributes) attrs[attr.name] = attr.value; return attrs;}
  const convertToNodes = (nodes) => {
    return Array.from(nodes).map(element => {
      if (element.nodeType === 3) return h('span', element.nodeValue)

      if (element.childNodes.length)
        return h(element.tagName, getAttributes(element), convertToNodes(element.childNodes))

      return h(element.tagName, getAttributes(element), element.innerHTML)
    })
  }
  const vNodes = convertToNodes(div.childNodes)

  return h(`div`, {...context.attrs}, vNodes)
}

This function is enclosed within a functional component that can be included in a template:

// parseHTML.ts
import { h } from 'vue'

const parseHTML = (props, context) => {
  let {content} = props

  const div = document.createElement('div')
  div.innerHTML = content
const getAttributes = (node) => {const attrs = {}; for (const attr of node.attributes) attrs[attr.name] = attr.value; return attrs;}
  const convertToNodes = (nodes) => {
    return Array.from(nodes).map(element => {
      if (element.nodeType === 3) return h('span', element.nodeValue)

      if (element.childNodes.length)
        return h(element.tagName, getAttributes(element), convertToNodes(element.childNodes))

      return h(element.tagName, getAttributes(element), element.innerHTML)
    })
  }
  const vNodes = convertToNodes(div.childNodes)

  return h(`div`, {...context.attrs}, vNodes)
}

parseHTML.props = ['content']

export default parseHTML

<template>
<parseHTML :content="myContent"/>
</template>
<script setup>
const myContent = "<div><p>Hello <button>Click!</button> some more text</p><p><em>cursive <strong>and bold</strong> stuff</em></p></div>"
</script>

The parseHTML render function allows you to manipulate nodes as needed. In my scenario, I transformed a basic button generated by Tiptap into a customized Vuetify VBtn.

By inserting the following code after checking for a #text node, I successfully added a Vuetify button based on specific criteria:

...
      if (element.attributes.getNamedItem('data-id')?.value === 'richTextBtn')
        return h(VBtn, {onClick($event) { alert('hello!')}}, [element.innerHTML])
...

Looking Ahead

I trust this information will aid others facing similar challenges. Your feedback and alternative solutions are welcomed and appreciated!

Guide on generating virtual nodes from a string containing HTML tags using Vue 3

Investigation

My Objective

Answer №1

My Solution

Looking Ahead

Similar questions

Leveraging AJAX to call upon a designated php file

Mastering the A-Frame Game Loop: Tips for Separating Logic and Rendering

What is the process for selecting the Node version when installing with .nvm?

After closing the box, make sure to hold it securely

Determining special characters within a string using VueJS

Vue.js: The href attribute in a link is different from the data

The PHP server is having trouble accepting a JavaScript object sent via AJAX

What method can I use in webpage coding to achieve this special highlight effect, and what is the official term for it?

Navigate to a new route in Vue Router and pass parameters as part of the navigation

Tips for reducing the amount of repetitive code in your reducers when working with redux and a plain old JavaScript object (

Is there a way to adjust the transparency of individual words in text as you scroll down a page, similar to the effect on https://joincly

Implement an event listener on the reference obtained from the React context

Sending target information as a property argument

Dealing with ASP.NET forms that involve a javascript plugin generating substitute input

Tips for organizing a Material UI DataGrid table effectively while keeping the total sum rows within the DataGrid unaffected

Establish the predefined date for the air-datepicker

Is it possible to verify with Jest that ReactDOM.render has been called if it's enclosed in a conditional statement?

Breaking down a lengthy series of items into several smaller lists

Error encountered with select2 when using a remote JSONP dataset

What steps should I take to resolve npm start issues within my Node.js application?