How to Organize HTML Tags like , , and in an Article Page for a Web Application?

I’m developing a web application with article pages and am struggling with how to organize HTML tags such as <h1>, <h2>, <ul>, etc. I want to create a system that allows writers to format articles easily without needing to understand HTML.

I initially attempted to use regex to replace custom markers in the text with corresponding HTML tags. Here’s what I tried:

loadArticlePage: (id) => {
 return `${articleData.content
    .replace(/{{{{{([^}]+)}}}}/g, "<h4>$1</h4>")
    .replace(/{{{{([^}]+)}}}}/g, "<h3>$1</h3>")
    .replace(/{{{([^}]+)}}}/g, "<h2>$1</h2>")
    .replace(/(((([^)]+))))/g, "<p>$1</p>")
  }
  </div>
 </div>`
;

However, this approach seems complicated for the article writers to use effectively. What is a better way to organize these HTML tags or a more user-friendly method for writers to format articles in the application? Any suggestions or best practices would be greatly appreciated!

I tried using a series of regular expressions to replace custom markers in the article content with HTML tags. My goal was to allow writers to use a simple markup format that would be converted into the correct HTML.