Convert Google Doc to basic HTML and other things. On Codepen.io

gistfile1.txt

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <div class="control1">
      
      <textarea id="tiny" style="height:30vh;width:100%"></textarea>
       <textarea v-if="isRawHTML" v-model="rawHTML" style="height:30vh; width: 100%" placeholder="Raw HTML"></textarea>
    <div class="control2">
      <div>
         <label class="form-check-label" for="accept">
           <input type="checkbox" v-model="isRawHTML" id="accept" class="form-check-input"/>
           Raw HTML'
         </label>
         <label class="form-check-label" for="accept">
           <input type="checkbox" v-model="filters.remove_nbsp" id="accept" class="form-check-input"/>
           Remove '&amp;nbsp;'
         </label>
         <label class="form-check-label" for="accept">
           <input type="checkbox" v-model="filters.remove_span" id="accept" class="form-check-input"/>
           Remove all &lt;span&gt;
         </label>
         <label class="form-check-label" for="accept">
           <input type="checkbox" v-model="filters.remove_attr" id="accept" class="form-check-input"/>
           Remove all attribues except tags with a trailing slash
         </label>
         <label class="form-check-label" for="accept">
           <input type="checkbox" v-model="filters.remove_emptyp" id="accept" class="form-check-input"/>
           Remove empty &lt;p&gt;&lt;/p&gt;
         </label>
         <label class="form-check-label" for="accept">
           <input type="checkbox" v-model="filters.beautify" id="accept" class="form-check-input"/>
           Beautify HTML
         </label>
      </div>
          <button v-on:click="getHTML">Convert</button>
    </div>
  </div>

    <hr />
     <pre style="text-align:left" v-html v-if="htmlOutput !== ''">{{htmlOutput}}</pre>
     <pre style="text-align:left" v-html v-else>Output will go here</pre>
    <hr />
     <textarea name="title" id="title" v-model="title" v-on:change="foo"></textarea>
     <textarea name="body"  id="body"  v-model="body" v-on:change="foo"></textarea>
    <pre style="text-align:left" v-html>{{output}}</pre>
  </div>

</template>

<script>
import * as jsBeautify from "https://cdn.skypack.dev/js-beautify@1.14.0";
tinymce.init({
      selector: '#tiny',
      plugins: 'code',
      toolbar: 'code export pageembed permanentpen table',
      //toolbar_mode: 'floating',
      //tinycomments_mode: 'embedded',
      tinycomments_author: '',
    });
  /* remove &nbsp; */
   const remove_nbsp = function(s) {
     return s.replace(/&nbsp;/g,'')
   }
   /* remove all span tags */
   const remove_span = function(s) {
     return s.replace(/<(span)[^>]*>(.*?)<\/\1>/g,'$2')
   }
   /* remove all attributes from tags - won't effect img since has forward slash */
   const remove_attr = function(s) {
     return s.replace(/<([a-z]*[1-6]?)[^\/>]*>/g,'<$1>')
   }
   const remove_emptyp = function(s){
     return s.replace(/<p><\/p>/g,'')
   }
   const beautify = function(s) {
     return html_beautify(s,{ indent_size: 4, preserve_newlines:true,eol:'\n',wrap_line_length:0 });
   }
   
   /* search for <h?> with all capitilization and title case them */
export default {
  data() {
    return {
      filters: {
        remove_nbsp: true,
        remove_span: true,
        remove_attr: true,
        remove_emptyp: true,
        beautify: true
      },
      filt: [
        {slug: 'remove_nbsp', name:"Remove '&amp;nbsp;'", run: true, filterFunc: remove_nbsp, arg1: null, arg2: null}
      ],
      isRawHTML: false,
      rawHTML:'',
      title: '',
      body: '',
      output: '',
      htmlOutput: '',
      titleTemplate: `
      [et_pb_section fb_built="1" _builder_version="3.19.7" background_image="https://metalformingsolutions.jrphost2.com/wp-content/uploads/2019/01/Cold-Forming-Header.jpg"][et_pb_row _builder_version="3.19.7"][et_pb_column type="4_4" _builder_version="3.0.47"][et_pb_text _builder_version="3.19.7" header_font="Brawler|||on|||||" header_text_color="#FFFFFF" header_text_shadow_style="preset2" header_text_shadow_color="#000000"]<h1 style="text-align:center">{{TITLE}}</h1>
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]      
      `,
      bodyTemplate: `
      [et_pb_section fb_built="1" _builder_version="3.19.7" custom_padding="51.6px|0px|0|0px|false|false"][et_pb_row _builder_version="3.19.7"][et_pb_column type="4_4" _builder_version="3.0.47"][et_pb_text _builder_version="3.19.7" text_font="||||||||" text_text_color="#000000" text_font_size="21px" header_font="||||||||" header_2_font="Brawler||||||||" header_2_text_color="#000000"]{{PAGE}}
[/et_pb_text][/et_pb_column][/et_pb_row]
      `
    };
  },
  methods: {
    getHTML() {
      let content = (this.isRawHTML) ? this.rawHTML : tinymce.get('tiny').getContent()
      if(this.filters.remove_nbsp) {
        content = remove_nbsp( content )
      }
      if(this.filters.remove_span) {
        content = remove_span( content )
      }
      if(this.filters.remove_attr) {
        content = remove_attr( content )
      }
      if(this.filters.remove_emptyp) {
        content = remove_emptyp( content )
      }
      if(this.filters.beautify) {
        content = beautify( content )
      }
      
      this.htmlOutput = content
      
    },
    foo() {

      let newBody = ''
      newBody = this.body
      
      /*replace h2 with center style */
      newBody = newBody.replace(/<h2>/g, '<h2 style="text-align:center;">')
      
      /* replace first p as splash*/
      newBody = newBody.replace(/<p>/, '<p style="font-size:1.2em;">')
      
      /* replace h1's with h2 centered */
      newBody = newBody.replace(/<(h1)[^>]*>(.*?)<\/\1>/g, '<h2 style="text-align:center">$2</h2>')
      
      newBody = beautify(newBody);
      this.output = this.titleTemplate.replace('{{TITLE}}', this.title) + this.bodyTemplate.replace('{{PAGE}}', newBody)
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: left;
  color: #2c3e50;
  margin-top: 20px;
}
  .control1 {
    display: flex;
  }
  .control2 {
    div {
      display: flex;
      flex-flow: column nowrap;
      margin-bottom: 1em;
    }
    label {
      dispay:flex;
      order:2;
      input {
        order: 0;
      }
    }
  }
  button {
    padding: .5em 1em;
    font-size: 1.2rem;
  }
</style>

Initial