前端如何優雅地顯示 JSON

2021-09-10 12:10:47 字數 929 閱讀 4933

json.cn 是我們開發過程中,經常用來格式化顯示json字串的工具**,那麼如何在自己編寫的前端介面顯示同樣風格的、格式化之後json字串呢?

網上流傳的版本顯示出來效果並不盡如人意,因此小改了一下。

>

}pre

>

css
pre

.string

.number

.boolean

.null

.key

js
syntaxhighlight

(json)

json = json.

replace

(/&/g

,'&').

replace(/

,'<').

replace

(/>/g

,'>');

return json.

replace

(/("(\\u[a-za-z0-9]|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[ee][+\-]?\d+)?)/g

,function

(match)

else

}elseif(

/true|false/

.test

(match)

)elseif(

/null/

.test

(match))if

(cls ==

'key'

)else})

.replace

("}","

}");}

,

簡單一招實現json資料視覺化

前端如何優雅地使用列舉

在前端開發中我們經常遇到這樣一種情況 假設我們要渲染乙個訂單列表,後端返回的資料中包含這樣乙個字段 訂單狀態 orderstatus 0後端可能會告訴我們,它對應後端的這樣一組值 那麼我們在前端如何優雅地把後端所返回的值0轉換成字串已完成呢?這就是本文要討論的問題。為了引出我們的方案,我們先來看乙個...

如何優雅地寫部落格

如何優雅地寫部落格 現在寫部落格面臨著幾個問題 編寫麻煩,大部分的部落格編輯器都很爛,csdn和等等。維護麻煩,維護多個部落格的資料同步很麻煩。歷史檢視,大部分部落格編寫都不能檢視之前的歷史資料。用github做部落格倉庫,將資料都寫在github上,這樣可以隨時檢視一年前的部落格資料,方便在原文件...

如何優雅地書寫JavaScript

這篇文章包含了幾乎所有關於提高 質量的內容,尤其是在構建大型應用程式時。主要包括四個部分 本主題僅涉及原生js,關於框架 比如react和vue 的內容會在以後的文章中展現。我想你們大多數人之前都聽說過solid,也就是物件導向設計裡的solid原則。這些原則基於物件導向設計,所以可能不適合其他程式...