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" class="post-text" 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?
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>