Javascript 将长文本字符串转换为正确的HTML

假设我有一个来自所见即所得文本编辑器的长字符串

var string = '<div class="section"><h2 #id="section1">Find the thing</h2><p>Here is a paragraph.</p><img src="https://via.placeholder.com/150"><p>Here is a second paragraph</p><p>Woah, you mean to tell me there's three paragraphs!</p></div><div class="section"><h2 #id="section2">Find the thing</h2><p>Here is a paragraph.</p><img src="https://via.placeholder.com/150"><p>Here is a second paragraph</p><p>Woah, you mean to tell me there's three paragraphs!</p></div><div class="section"><h2 #id="section3">Find the thing</h2><p>Here is a paragraph.</p><img src="https://via.placeholder.com/150"><p>Here is a second paragraph</p><p>Woah, you mean to tell me there's three paragraphs!</p></div>'

var string='Find the thing这里是一段。
这里是第二段
哇，你的意思是告诉我有三段
 找到东西这里有一段。
这里有第二段
哇，你的意思是告诉我有三段
 找到东西这里有一段。
这里有第二段
哇，你的意思是告诉我有三段
 "

有没有Vue方法可以将该字符串转换为结构化HTML

我想从原始字符串创建一个h2元素数组，然后将数组作为道具传递给子组件。

尝试使用directie

---

注意：请注意，内容是以纯HTML格式插入的-它们不会编译为Vue模板。

您想要这样的内容吗：

<template>
  <div>
    <child :h2Elements="h2Elements" />
  </div>
</template>

<script>
import child from './components/child.vue';

export default {
  name: 'app',
  components: { child },
  data() {
    return {
      h2Elements: [],
    };
  },
  mounted() {
    let myRoot = document.createElement('div');
    myRoot.innerHTML = `<div class="section"><h2 #id="section1">Find the thing</h2><p>Here is a paragraph.</p><img src="https://via.placeholder.com/150"><p>Here is a second paragraph</p><p>Woah, you mean to tell me there's three paragraphs!</p></div><div class="section"><h2 #id="section2">Find the thing</h2><p>Here is a paragraph.</p><img src="https://via.placeholder.com/150"><p>Here is a second paragraph</p><p>Woah, you mean to tell me there's three paragraphs!</p></div><div class="section"><h2 #id="section3">Find the thing</h2><p>Here is a paragraph.</p><img src="https://via.placeholder.com/150"><p>Here is a second paragraph</p><p>Woah, you mean to tell me there's three paragraphs!</p></div>`;
    for (let div of myRoot.childNodes) {
      let [h2] = div.getElementsByTagName('h2');
      this.h2Elements.push(h2);
    }
  },
};
</script>

从“/components/child.vue”导入子项；
导出默认值{
名称：“应用程序”，
组件：{child}，
数据（）{
返回{
H2元素：[]，
};
},
安装的（）{
让myRoot=document.createElement（'div'）；
myRoot.innerHTML=`找到东西这里是一段。
这里是第二段。
哇，你的意思是告诉我有三段！
找到东西这里是一段。
这里是第二段。
哇，你的意思是告诉我有三段。
找到东西这里是第二段。
这里是第二段图
哇，你的意思是告诉我有三段文字！
`；
for（设myRoot.childNodes的div）{
设[h2]=div.getElementsByTagName（'h2'）；
这个。h2元素。推（h2）；
}
},
};

{{h2Elements.map（h2=>h2.innerText）}
导出默认值{
姓名：'儿童'，
道具：['h2Elements']，
};

这是否回答了您的问题？不完全是。我想将h2元素数组作为道具传递给子组件。我将在我原来的帖子中澄清。谢谢如果你用OP的字符串创建了一个有效的示例，那么你的答案会更好——只是一个建议，这不是我想要的。我想从原始字符串创建一个h2元素数组，然后将数组作为道具传递给子组件。我将在我原来的帖子中澄清。谢谢这就是我要找的。非常感谢。现在，如果我能让我的数据发挥好。

<template>
  <div>{{ h2Elements.map(h2 => h2.innerText) }}</div>
</template>

<script>
export default {
  name: 'child',
  props: ['h2Elements'],
};
</script>