html转jsx

初衷

之前做的一个阿里需求，是将原有的HTML的静态页面重构成前后分离的项目，要求是用dva-cli脚手架来开发
那么就牵扯到一个问题就是这么多的HTML页面肯定不能手动转成jsx语法啊。
毕竟差别还是有很多的，尤其是写div的类名
我们知道，在普通HTML中是这样写div和类名的

<div class="demo div1"></div>

但是在jsx语法中尤其是同一div上应用了多个类名，jsx写起来会很让热挠头

<div className={[styles.demo,styles.div1].join(' ')}></div>

于是乎就做了一个小工具，可以将html转换为jsx语法，这里需要注意一下styles是我引入的less后赋值的变量名

import styles from '../assets/css/index.css'

效果

左边输入html点击转换会自动生成在右边的文本域中

原理

这个小Demo的原理非常简单，就是通过正则匹配到所有class=“”里的内容，然后通过replace方法替换
值得注意的是replace方法的第二个参数可以传一个固定的字符串，也可以传一个函数，函数的返回值作为替换的内容
这里我们不能把类名替换成固定的值，而是需要将类名做处理，所有在replace第二个参数中传入一个函数，函数的参数，就是匹配到的内容
获得内容就很好办了，先把类名用空格拆分成数组，然后写个jsx中的格式即可

代码

function submit(){
    var con = document.getElementById('text').value            
    con = con.replace(/class=".*?"/ig, value =>{
        value = value.replace('class="','').replace('"','')
        value = value.split(' ')
        console.log(value)
        if(value.length>1){
            value = value.map(item=>`styles.${item}`)
            value = `[${value.join(',')}].join(' ')`
        }else{
            value = `styles.${value}`
        }
        return `className={${value}}`
    });
    document.getElementById('text2').value = con
}