美文网首页
JSON数据美化,js代码美化

JSON数据美化,js代码美化

作者: 初心不改_0055 | 来源:发表于2021-10-11 14:08 被阅读0次

    美化前(都挤在一行)

    image.png

    以下为vue3 tsx写法

    import { defineComponent, watch } from 'vue';
    
    export default defineComponent({
      props: {
        code: {
          type: Object || Array,
          required: true,
        },
      },
      setup(props) {
        // json格式美化
        function prettyFormat(code: any) {
          try {
            for (const key in code) {
              if (typeof code[key] === 'function') {
                let str = code[key];
                str = str.toString();
                code[key] = str.replace(/\n/g, '<br/>');
              }
            }
            // 设置缩进为2个空格
            let str = JSON.stringify(code, null, 2);
            str = str
              .replace(/&/g, '&')
              .replace(/</g, '<')
              .replace(/>/g, '>');
            // str = str.replace(/\n/g, '/r')
            return str;
          } catch (e) {
            console.error('异常信息:' + e);
            return '';
          }
        }
    
        return () => {
          return <pre v-html={prettyFormat(props.code)}></pre>;
        };
      },
    });
    

    美化后

    image.png

    相关文章

      网友评论

          本文标题:JSON数据美化,js代码美化

          本文链接:https://www.haomeiwen.com/subject/bsmloltx.html