How can I convert one html element to another element?

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)?

Does this answer your question? [JS. How to replace html element with another element/text, represented in string?](https://stackoverflow.com/questions/13388379/js-how-to-replace-html-element-with-another-element-text-represented-in-string) — Anderson Green, Jun 26 '22 at 13:43
@AndersonGreen It is something similar to my question. Let me try it. Thank you. — Melon NG, Jun 26 '22 at 13:52
What level of nesting do you anticipate. 1 like the example you posted. Or unlimited? — Bravo, Jun 26 '22 at 13:53
@Bravo The nesting is unknown but not unlimited. Most of times is 2 or 3. — Melon NG, Jun 26 '22 at 13:55
What did you try in order to solve this yourself, where did you get stuck? Where's your "*[mcve]*" code, what went wrong with that and in what way? — David Thomas, Jun 26 '22 at 14:09
The component "rich-text" may help u. For example: It will render the html code. — taolu, Jun 28 '22 at 09:27
@taolu in spite of it is an easy way. However, it is not friendly for SEO. — Melon NG, Jul 03 '22 at 05:10

score 1 · Accepted Answer · answered Jun 26 '22 at 17:06

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 .classNames 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

How can I convert one html element to another element?

1 Answers1