[Vuejs]-Extract html and wordpress shortcodes into array of objects

by

1👍

✅

You could use a DOM Parser and iterate the toplevel elements of the DOM. If such an element is a text node and it has the shortcode format, then create a separate object for it in the output array, otherwise get the HTML for the iterated element and accumulate it while it is not a shortcode, and finally output it as an object:

const html = `<h1>Lorem ipsum dolor sit amet</h1>
<p>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.</p>

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

<h2>Lorem ipsum dolor sit amet</h2>
<p>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.</p>

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

<h2>Lorem ipsum dolor sit amet</h2>
<p>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.</p>`;

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);
👤trincot

Leave a comment