как найти html элементов в свойстве данных в vue?

Question

Я пытаюсь создать форму типа yoast, которая будет проверять, сколько <h1> или <img> существует в данных или сколько тегов <img> имеет атрибут alt ...

В настоящее время Я использую Vue Quill Editor для своего редактора кода, и я получаю элементы html в своих данных, вот простая настройка:

Vue:

<template>
    <quill-editor
        class="editor"
        ref="myTextEditor"
        :value="postForm.postBody"
        @change="onEditorChange($event)"
    />
</template>
<script>
    import dedent from "dedent";

    export default {
        name: "post_detail",
        props: ['postForm'],
        methods: {
            onEditorChange({ quill, html, text }) {
                this.postForm.postBody = html
            }
        },
        computed: {
            editor() {
                return this.$refs.myTextEditor.quill
            }
        },
    }

</script>

, так что с этой настройкой все работает нормально. теперь я хочу добавить текст под этой формой, чтобы сообщить, например, сколько тегов <img> существует в данных или сколько тегов <img> имеет атрибут или что-то в этом роде.

Изменить 01: свойство данных получит ровно html элементы типа <h1>Hello</h1><img src="./img.jpg" alt="data">

Answer 1

Самый простой способ - создать временную модель DOM из этой html строки, а затем использовать что-то вроде querySelectorAll или getElementsByTagName для ее подсчета.

...
  methods: {
    onEditorChange({ quill, html, text }) {
      let root = document.createElement('div')
      root.innerHTML = html
      this.h1Count = root.querySelectorAll('h1').length
    }
  }
...

JSFiddle