[Vuejs]-How can I get h2 tags with vuejs?

by

0👍

✅

You can indeed achieve this via RegExp:

new Vue({
  el: '#app',
  data() {
    return {
      "link": "http://wordpress.example.com/2022/02/16/example/",
      "title": { "rendered": "This is a test blog post" },
      "content": {
         "rendered": "\n<h2><strong>This is a blog test thread</strong></h2>\n\n\n\n<p>This is a blog test content This is a blog test content This is a blog test content This is a blog test content This is a blog test content This is a blog test content</p>\n\n\n\n<h2><strong>this is a blog test thread 2</strong></h2>\n\n\n\n<p>This is a blog test content This is a blog test content...."
      }
    }
  },
  computed: {
    headlines() {
      return [ ...this.content.rendered.matchAll(/<h2>(.*?)<\/h2>/g) ].map(headline => headline[1])
    }
  }
})
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ol v-for="headline of headlines">
    <li v-html="headline"></li>
  </ol>
  <div itemprop="articleBody" class="post-text" v-html="content.rendered" />
</div>

When you don’t know, what the HTML contains, RegExp extraction might fail in some cases. Also using v-html with unsafe input isn’t recommended.

It’d be better to actually parse the HTML:

new Vue({
  el: '#app',
  data() {
    return {
      "link": "http://wordpress.example.com/2022/02/16/example/",
      "title": { "rendered": "This is a test blog post" },
      "content": {
         "rendered": "\n<h2><strong>This is a blog test thread</strong></h2>\n\n\n\n<p>This is a blog test content This is a blog test content This is a blog test content This is a blog test content This is a blog test content This is a blog test content</p>\n\n\n\n<h2><strong>this is a blog test thread 2</strong></h2>\n\n\n\n<p>This is a blog test content This is a blog test content...."
      }
    }
  },
  computed: {
    headlines() {
      domParser = new DOMParser();
doc = domParser.parseFromString(this.content.rendered, "text/html");
      return [ ...doc.getElementsByTagName('h2') ].map(headline => headline.textContent )
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ol v-for="headline of headlines">
    <li v-html="headline"></li>
  </ol>
  <div itemprop="articleBody" class="post-text" v-html="content.rendered" />
</div>

Leave a comment