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

Question

Recently I have been coding the WeChat mini program.

There are some HTML strings will get from the remote server (these strings are also used by the website, so it has to convert by JavaScript) and render into the body of the mini program.

Whereas, WeChat mini program cannot accept the HTML strings that I have to convert it.

For example, the HTML strings are like this:

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

I have to convert them like this:

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

In my first opinion, I consider achieving this by String.replace method. However, it can hardly match the class and id .

How can I achieve this by using the original JavaScript (the WeChat mini program does not support any other library such as jQuery)?

Answer 1

Here is some code that will transform any html code received from your backend into the desired format. No matter what kind of and how many elements are encountered, they will be converted into <text > elements with .className s composed of their id (if available), their original .className and their original .tagName (in lower case):

 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 is an array with possible html strings. In the snippet above all strings are converted and then put on the page by using document.body.innerHTML . This was merely done for demonstration purposes. The conversion output can of course be used in different ways