제목을 다음으로 다시 작성: HTML 및 WordPress 단축 코드를 객체 배열로 추출합니다.

Question

Nuxt를 프런트엔드로 사용하여 헤드리스 WordPress 웹사이트를 개발 중입니다.

웹사이트에는 단축 코드가 포함된 수천 개의 기사가 있습니다. graphql을 통해 모든 페이지 데이터를 가져오고 v-html을 사용하여 콘텐츠를 렌더링하면 모든 것이 정상이지만 단축 코드는 분명히 일반 텍스트로만 렌더링됩니다.

대부분이 매우 간단한 단축코드이므로 이를 대체할 Vue 컴포넌트를 만들어 보겠습니다

으아악

내가 해야 할 일은 페이지의 일부를 HTML로 렌더링하거나 내용에 따라 구성 요소로 렌더링하는 데 사용할 수 있는 객체 배열로 HTML을 분할하는 것입니다.

이 작업을 수행하는 가장 좋은 방법은 정규식을 사용하는 것이라고 생각하는데 이것이 제가 혼란스러워하는 부분입니다.

다음과 같은 HTML과 단축 코드가 있다고 가정해보세요

으아악

제가 원하는 것은 아래와 같이 객체 배열을 반환하는 것입니다

으아악

이것이 나에게 필요한 기반이며 속성 등을 가져와서 단축 코드를 더욱 세분화할 수 있습니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 정규식이 최선의 접근 방식입니까?

Answer 1

DOM 파서를 사용하여 DOM의 최상위 요소를 반복할 수 있습니다. 해당 요소가 텍스트 노드이고 단축 코드 형식인 경우 출력 배열에 별도의 객체를 생성하고, 그렇지 않으면 해당 요소의 HTML을 반복하여 단축 코드가 아닌 경우 누적한 후 최종적으로 객체로 출력합니다. :

으아악