Tulis semula tajuk sebagai: Ekstrak kod pendek HTML dan WordPress sebagai tatasusunan objek

Question

Saya sedang membangunkan laman web WordPress tanpa kepala menggunakan Nuxt sebagai bahagian hadapan.

Tapak web mempunyai beribu-ribu artikel dengan kod pendek. Saya mendapat semua data halaman melalui graphql dan memberikan kandungan menggunakan v-html dan semuanya baik-baik saja, tetapi kod pendek nampaknya hanya dipaparkan sebagai teks biasa.

Kebanyakan daripadanya adalah kod pendek yang sangat mudah, jadi saya akan mencipta komponen Vue untuk menggantikannya

<component :is="someshortcode">

Apa yang perlu saya lakukan ialah membahagikan html saya kepada pelbagai objek yang boleh saya gunakan untuk menjadikan bahagian halaman menjadi html atau menjadi komponen, bergantung pada apa itu.

Saya rasa cara terbaik untuk melakukan ini ialah menggunakan ungkapan biasa dan di sinilah saya keliru.

Andaikan saya mempunyai html berikut dan beberapa kod pendek

<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>
<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>
<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>
<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>
<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>
<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>
<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>

Apa yang saya mahu lakukan ialah mengembalikan susunan objek seperti yang ditunjukkan di bawah

[
    {
        type: 'html',
        content: `<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>
<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>
<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>`
    },
    {
        type: 'shortcode',
        content: `[someshortcode attr1="value1" attr2="value2"]`
    },
    {
        type: 'html',
        content: `<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>
<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>
<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>`
    },
    {
        type: 'shortcode',
        content: `[someshortcode attr1="value1" attr2="value2"]`
    },
    {
        type: 'html',
        content: `<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>
<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>
<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>`
    },
]

Ini adalah asas yang saya perlukan dan kemudian saya akan dapat memecahkan kod pendek dengan lebih lanjut dengan mendapatkan hartanah dsb.

Apakah cara terbaik untuk menyelesaikan masalah ini? Adakah ungkapan biasa pendekatan terbaik?

Answer 1

Anda boleh menggunakan penghurai DOM dan mengulangi elemen peringkat atas DOM. Jika elemen sedemikian ialah nod teks dan mempunyai format kod pendek, cipta objek berasingan untuknya dalam tatasusunan output, jika tidak, dapatkan lelaran ke atas HTML elemen dan kumpulkannya jika ia bukan kod pendek, dan akhirnya keluarkannya sebagai objek :

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