行联样式化处理
<!DOCTYPE html>
<html lang="en">
<head>
<title>处理行样式json数据</title>
<title>Document</title>
</head>
<body>
<h1>失去焦点查看结果</h1>
<h1>浏览器中复制你的样式</h1>
<textarea id="styles" style="width: 100%;height: 200px;font-size: 20px; font-weight: 200;" type="text" placeholder="例如:
word-break: break-all;
word-wrap: break-word;
position: relative;"></textarea>
<h1>结果</h1>
<textarea id="data" style="width: 100%;height: 200px;font-size: 20px; font-weight: 200;" type="text" ></textarea>
<script type="text/javascript">
//处理函数
function deal(style) {
const a = `@${style}@`;
const b = a
.toString()
.replace(/\n/g, "")
.replace(/@/g, '"')
.replace(/:/g, '":"')
.replace(/" /g, '"')
.replace(/;/g, '",\n"')
.split('""')[0];
let c = `{\n${b.slice(0, b.length - 2)}\n}`;
while (c.indexOf('" ') >= 0) {
c = c.replace(/" /g, '"');
}
console.log(c);
return c;
}
const obj = document.getElementById("styles");
const obj2 = document.getElementById("data");
obj.onblur = () => {
// deal(obj.value);
obj2.value = deal(obj.value);
}
</script>
</body>
</html>
## 希望内容对你有帮助,如果有错误请联系我 q: 1911509826,感谢支持
