动态写html和css能显示效果(类似编辑器)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在看grid布局里面的属性什么的，就在想能不能我直接在页面写样式，然后页面跟着改动。试着写下。勉勉强强出来一个。

---

一、效果

二、编写代码和遇到问题

1.思路

用两个文本框来存放写的html 和css内容。对css内容筛选和重值，在循环到Js里面

2.两个文本框

代码如下（示例）：
vue的v-model能实现双向绑定d
vue的v-html能将文本里面数据当成html然后进行输出

<template>
  <div>
    <div class="warp">
      <div>
        <h1>html</h1>
        <pre>
            <textarea v-model="htmlPre" name="" id="" cols="30" rows="10"></textarea>
          </pre>
      </div>
      <div>
        <h1>css</h1>
        <pre>
            <textarea v-model="cssPre" name="" id="" cols="30" rows="10"></textarea>
          </pre>
      </div>
    </div>
    <p v-html="htmlPre"></p>
  </div>
</template>

2.开始解析css内容

2.1先获取css里面的类名

需要开始利用正则把其他特殊符号进行替换两次在利用split('.')对数据进行分割，然后在进行筛选

 var cssPre=`.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196f3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}`,
var cssTitle = cssPre
        .replace(/\{(.+?)\}|[\s]/g, "")
        .replace(/\{(.+?)\}|[\s]/g, "")
        .split(".")
        .filter((item) => item);
 console.log("属性名",cssTitle)

2.2先获取css里面的值

需要开始利用正则把换行符进行替换，使用match返回数组

 var cssPre=`.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196f3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}`,
var cssCont = cssPre
        .replace(/\{(.+?)\}|[\n]/g, "")
        .match(/\{(.+?)\}/g)
        .filter((item) => item);
 console.log("值",cssCont)

2.3对css的值进行替换

1.将{(后面两个空格) 换成{"不然无法进行下一步解析
2.将;换成","
3.将:换成":"
4.将"(后面俩空格)换成"
5.将字符串最后一个,"字符替换掉
6.将font-size转换成fontSize使用方法为fontBig下个说

获取上面的cssCont对它进行替换
 let allList = [];
      var d = "";
      cssCont.forEach((e) => {
        e = e.replaceAll("{  ", '{"');
        e = e.replaceAll(";", '","');
        e = e.replaceAll(":", '":"');
        e = e.replaceAll('"  ', '"');
        e = e.replace(/(.*),"/, "$1");
        d = this.fontBig(e);
        allList.push(d);
      });
      this.hList = allList;

2.4 fontBig

var val = "font-size:20px;background-color:red"
  let newStr = "";
      let v = val.split("-"); //先用字符串分割成数组
      v.forEach((item, index) => {
        if (index > 0) {
          return (newStr += item.replace(item[0], item[0].toUpperCase()));
        } else {
          return (newStr += item);
        }
      });
      return newStr;
    },

2.5 把两部分整合成一个数组

 var length = this.cList.length; //获取css属性名的个数
      for (var i = 0; i < length; i++) {
        this.valList.push({
          name: this.cList[i],
          content: this.hList[i],
        });
      }

3. 进行解析将String转化为Obj，进行循环赋值

三种方式任选一种

 var s = JSON.parse(this.valList[i].content)//this.valList[i].content是css的值（可替换）
    var obj = eval('('+this.valList[i].content+')')
    var  f = new Function('return'+this.valList[i].content)()
var length = this.valList.length;
    for (var i = 0; i < length; i++) {
      var s = JSON.parse(this.valList[i].content);
      $("div")
        .find("." + this.valList[i].name)
        .css(s);
    }

---

全部代码

<template>
  <div>
    <div class="warp">
      <div>
        <h1>html</h1>
        <pre>
            <textarea v-model="htmlPre" name="" id="" cols="30" rows="10"></textarea>
          </pre>
      </div>
      <div>
        <h1>css</h1>
        <pre>
            <textarea v-model="cssPre" name="" id="" cols="30" rows="10"></textarea>
          </pre>
      </div>
    </div>
    <p v-html="htmlPre"></p>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      htmlPre: `<div class="grid-container">
      <div class="grid-item item1">1</div>
      <div class="grid-item item2">2</div>
      <div class="grid-item item3">3</div>
      <div class="grid-item item4">4</div>
      <div class="grid-item item5">5</div>
    </div>`,
      cssPre: `.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196f3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}`,
      cList: [], //css名字
      hList: [], //css内容
      valList: [], //生成整体
    };
  },
  created() {},
  updated() {
    this.allData(); // 获取css属性名和值 组成一个整体
    //进行样式添加
    var length = this.valList.length;
    for (var i = 0; i < length; i++) {
      var s = JSON.parse(this.valList[i].content);
      $("div")
        .find("." + this.valList[i].name)
        .css(s);
    }
  },
  methods: {
    //全部
    allData() {
      this.cssName(this.cssPre); //先获取类名
      this.cssCont(this.cssPre); //获取css内容
      this.cssReplace(this.hList); //里面换大写
      var length = this.cList.length;
      for (var i = 0; i < length; i++) {
        this.valList.push({
          name: this.cList[i],
          content: this.hList[i],
        });
      }
    },
     // 提取css类名
     cssName(s) {
      this.cList = s
        .replace(/\{(.+?)\}|[\s]/g, "")
        .replace(/\{(.+?)\}|[\s]/g, "")
        .split(".")
        .filter((item) => item);
    },
    // 提取css内容
    cssCont(s) {
      this.hList = s
        .replace(/\{(.+?)\}|[\n]/g, "")
        .match(/\{(.+?)\}/g)
        .filter((item) => item);
    },
    //:换:"  ;换",  -为空 -后面为大写
    cssReplace(val) {
      let allList = [];
      var d = "";
      val.forEach((e) => {
        e = e.replaceAll("{  ", '{"');
        e = e.replaceAll(";", '","');
        e = e.replaceAll(":", '":"');
        e = e.replaceAll('"  ', '"');
        e = e.replace(/(.*),"/, "$1");
        d = this.fontBig(e);
        allList.push(d);
      });
      this.hList = allList;
    },
   
    //  获取下标然后转大写
    fontBig(val) {
      let newStr = "";
      let v = val.split("-"); //先用字符串分割成数组
      v.forEach((item, index) => {
        if (index > 0) {
          return (newStr += item.replace(item[0], item[0].toUpperCase()));
        } else {
          return (newStr += item);
        }
      });
      return newStr;
    },
  },
};
</script>
  <style scoped>
.warp {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  margin: 40px;
}
</style>