预览效果
实现原理
使用正则表达式进行span标签的颜色替换
源代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON高亮代码块</title>
<style>
#code {
font-size: 32px;
color: #e36209;
font-family: 'Courier New', Courier, monospace;
background: #f5f5f5;
}
.green {
color: #22863a;
}
.blue {
color: #005cc5;
}
.black {
color: #032f62;
}
</style>
</head>
<body>
<pre id="code"></pre>
<script>
// 核心算法
function highlightJSON(json) {
// 匹配key
let keyReg = new RegExp("\"(.*)\"(?=:)", "g")
// 匹配value
let valueReg = new RegExp("(?<=: )(\"(.*)\"|\\d+)", "g")
if (typeof json === "object" && json !== null) {
json = JSON.stringify(json, this, 5)
}
// 颜色替换
let res = json.replace(keyReg, (match) => {
return `<span class="green">${
match}</span>`
}).replace(valueReg, (match) => {
if (/\d/.test(match)) {
return `<span class="blue">${
match}</span>`
}
return `<span class="black">${
match}</span>`
})
return res
}
var json = {
"name": "tailwindcss",
"version": "1.0.0",
"description": "",
"main": "tailwind.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.1.3"
}
}
document.getElementById("code").innerHTML = highlightJSON(json)
</script>
</body>
</html>
正则表达式的学习
有关正则表达式的学习，可以参考我的博客：正则表达式