如何将一个 html 元素转换为另一个元素？

Question

最近一直在写微信小程序。

有一些 HTML 字符串会从远程服务器获取（这些字符串也被网站使用，所以它必须通过 JavaScript 转换）并渲染到小程序的主体中。

而微信小程序不能接受我必须转换的HTML字符串。

例如，HTML 字符串如下所示：

<div>
   <h2 id="Title">Here is a H2</h2>
   <article class="ContentArticle">
   There are some articles.
   </article>
</div>

我必须像这样转换它们：

<view class="div">
   <text class="Title h2">Here is a H2</text>
   <text class="ContentArticle article">
   There are some articles.
   </text>
</view>

在我的第一个意见中，我考虑通过String.replace方法来实现这一点。 但是，它几乎无法匹配class和id 。

我如何使用原始的 JavaScript 来实现这一点（微信小程序不支持任何其他库，例如 jQuery）？

Answer 1

这里有一些代码可以将从后端收到的任何 html 代码转换为所需的格式。 无论遇到什么样的元素和多少元素，它们都将被转换为<text > 元素，其.className由它们的id （如果可用）、它们的原始.className和它们的原始.tagName （小写）组成：

 const htmlArr=[`<div> <h2 id="Title">Here is an H2</h2> <article class="ContentArticle"> There are some articles. </article> </div>`, `<div> <h2 id="Title">Here is another H2</h2> <article class="ContentArticle"> And here are some more. </article> </div>`, `<div> <h3 id="Title">Here is an H3 heading</h3> <article class="ContentSubArticle"> This is a sub-article. </article> </div>`]; document.body.innerHTML=htmlArr.map(d=>{ let div=document.createElement("div"); div.innerHTML=d; return '<view class="div">'+[...div.children[0].children].map(e=>`<text class="${((e.id||"")+" "+e.className).trim()} ${e.tagName.toLowerCase()}">${e.innerHTML}</text>`).join("")+'</view>'; }).join("\n"); console.log(document.body.innerHTML)

htmlArr是一个包含可能的 html 字符串的数组。 在上面的代码片段中，所有字符串都被转换，然后使用document.body.innerHTML放到页面上。 这只是为了演示目的。 转换输出当然可以以不同的方式使用