How can I get h2 tags with vuejs?-CodePudding

There are h2 tags in the article. I'm aiming to use H2 tags as a table of contents.

Is there a way to get these tags because the H2 tags come within the article? I tried methods like Replace, substring, but I couldn't get only the h2 tags.

The post content comes as json like this

{
"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....
}

 <div itemprop="articleBody"  v-html="post.content.rendered" />

i get the data with v-html as post.content.rendered variable

html

This is a blog test thread

This is a blog test content This is a blog test content ....

As you can see, I couldn't get these tags because the h2 tags are embedded in the article. Is there a way to get the H2 tags?

CodePudding user response：

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"  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"  v-html="content.rendered" />
</div>