Recientemente he estado codificando el mini programa WeChat.
Hay algunas cadenas HTML que se obtendrán del servidor remoto (estas cadenas también son utilizadas por el sitio web, por lo que tiene que convertirlas mediante JavaScript) y representarlas en el cuerpo del mini programa.
Mientras que el mini programa WeChat no puede aceptar las cadenas HTML que tengo para convertirlo.
Por ejemplo, las cadenas HTML son así:
<div> <h2 id="Title">Here is a H2</h2> <article class="ContentArticle"> There are some articles. </article> </div>Tengo que convertirlos así:
<view class="div"> <text class="Title h2">Here is a H2</text> <text class="ContentArticle article"> There are some articles. </text> </view> En mi primera opinión, considero lograr esto mediante el método String.replace . Sin embargo, difícilmente puede coincidir con la class y la id .
¿Cómo puedo lograr esto usando el JavaScript original (el mini programa WeChat no es compatible con ninguna otra biblioteca como jQuery)?
Aquí hay un código que transformará cualquier código html recibido de su backend en el formato deseado. No importa qué tipo y cuántos elementos se encuentren, se convertirán en elementos <text > con .className s compuestos por su id (si está disponible), su .className original y su .tagName original (en minúsculas):
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 es una matriz con posibles cadenas html. En el fragmento anterior, todas las cadenas se convierten y luego se colocan en la página mediante document.body.innerHTML . Esto se hizo simplemente con fines de demostración. Por supuesto, la salida de conversión se puede utilizar de diferentes maneras.