Rewrite title as: Extract HTML and WordPress shortcodes as array of objects

Question

I'm developing a headless WordPress website using Nuxt as the frontend. The website has thousands of articles with shortcodes. I get all the page data via graphql and render the content using v-html and everything is fine, but the shortcode apparently only renders as plain text. Most of them are very simple shortcodes so I will create Vue components to replace them <component:is="someshortcode"> What I need to do is split my html into an array of objects,

P粉714844743 · Answer

You can use a DOM parser and iterate over the top elements of the DOM. If such an element is a text node and has shortcode format, create a separate object for it in the output array, otherwise get iterate over the HTML of the element and accumulate it if it is not a shortcode, and finally output it as an object:

const html = `Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis elit ante. Vivamus semper dui eget justo viverra facilisis. Etiam ut leo fermentum, sagittis mauris nec, placerat lorem.

[someshortcode attr1="value1" attr2="value2"]

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis elit ante. Vivamus semper dui eget justo viverra facilisis. Etiam ut leo fermentum, sagittis mauris nec, placerat lorem.

[someshortcode attr1="value1" attr2="value2"]

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis elit ante. Vivamus semper dui eget justo viverra facilisis. Etiam ut leo fermentum, sagittis mauris nec, placerat lorem.`;

const {body} = new DOMParser().parseFromString(html, 'text/html');
let content = "";
const arr = [];
for (const child of [...body.childNodes]) {
    if (child.nodeType === 3 && child.textContent.trim()[0] == "[") {
        if (content) arr.push({ type: "html", content });
        content = "";
        arr.push({ type: "shortcode", content: child.textContent.trim() });
    } else {
        content += (child.outerHTML ?? child.textContent);
    }
}
if (content) arr.push({ type: "html", content });
console.log(arr);

Rewrite title as: Extract HTML and WordPress shortcodes as array of objects

reply all(1)I'll reply