项目中需要把div 上的样式值转成数据展示

形如: padding: 7px 2px 1px 3px; color: rgb(238, 65, 65); background-color: rgb(247, 106, 106); text-align: right;

转成:{ padding: '5px', text-align: 'right' }


// 样式转对象
function styleToObj(style) {
if (!style || style == '') { return }
var Arr = style.split(';')
Arr = Arr.filter(item => {
return item != ''
})
let str = ''
Arr.forEach(item => {
let test = ''
trim(item).split(':').forEach(item2 => {
test += '"' + trim(item2) + '":'
})
str += test + ','
})
str = str.replace(/:,/g, ',')
str = str.substring(0, str.lastIndexOf(','))
str = '{' + str + '}'
return JSON.parse(str)
}

/**
* 去掉字符串前后所有空格
*/

function trim (str, isglobal) {
var result
result = str.replace(/(^\s+)|(\s+$)/g, '')
if (isglobal && isglobal.toLowerCase() === 'g') {
result = result.replace(/\s/g, '')
}
return result
}

 

JS 样式字符串 转 JSON对象的更多相关文章

  1. js中字符串转json对象时报错: Uncaught SyntaxError: Unexpected token s in JSON at position 2

    解决方法: js中获取jsp的返回值 var json='${channels}' var channels = JSON.parse(json);就报上面的错. json的值最终会转成这种json格 ...

  2. js 将json字符串转换为json对象的方法解析

    推荐: var obj = eval('(' + str + ')'); var last=JSON.stringify(obj); //将JSON对象转化为string字符 例如: JSON字符串: ...

  3. js中json字符串与json对象的相互转换

    web前端开发过程中,数据传输json是以字符串的形式传递,而js操作的是JSON对象. 一.JSON字符串转换为JSON对象 var obj = JSON.parse(str[, reviver]) ...

  4. js 将json字符串转换为json对象的方法解析-转

    例如: JSON字符串:var str1 = '{ "name": "cxh", "sex": "man" }'; JS ...

  5. js 将json字符串转换为json对象

    要引入:jquery-json-2.4.js 在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如: JS ...

  6. js json字符串与json对象互相转换(最全)

      1.json字符串转json对象 使用场景:通常在取json字符串里具体的值时,会用到. var jsonString = '{"name":"Marydon&quo ...

  7. JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串

    JS遍历JSON对象 JS遍历JSON对象 <script> var obj = { "goodsid": "01001", "goods ...

  8. js 中json字符串转化json对象

    JSON字符串:var str = '{ "name": "cxh", "sex": "man" }'; JSON对象: ...

  9. js篇-json字符串与json对象相互转化

    回调返回结果是 json字符串还是json对象一定要看清楚哦,状态不好的时候,感觉眼神也不好使了, var a = "{"name":"jenny", ...

随机推荐

  1. Nginx log日志切割shell

    #!/bin/bash#此脚本用于自动分割Nginx的日志,包括access.log和error.log#每天00:00执行此脚本 将前一天的access.log重命名为access-xxxx-xx- ...

  2. Quick Guide to Microservices with Spring Boot 2.0, Eureka and Spring Cloud

    https://piotrminkowski.wordpress.com/2018/04/26/quick-guide-to-microservices-with-spring-boot-2-0-eu ...

  3. Arch Linux中安装Anaconda

    安装步骤 通过AUR安装yaourt -S anaconda 激活Anaconda环境source /opt/anaconda/bin/activate root 关闭Anaconda环境source ...

  4. (转)多线程——继承Thread 类和实现Runnable 接口的区别

    java中我们想要实现多线程常用的有两种方法,继承Thread 类和实现Runnable 接口,有经验的程序员都会选择实现Runnable接口 ,其主要原因有以下两点: 首先,java只能单继承,因此 ...

  5. 使用visual C++测试

    背景:学习一门语言最好的方式就是实际动手敲一遍.现在敲一遍的障碍是不能熟练的使用工具,特此记录下来 新建工程 新建——项目——Windows 控制台应用程序 如何新建测试用例呢? OJ试题在VS201 ...

  6. python3+django2 开发易语言网络验证(下)

    第六步:网络验证服务器端项目上线部署 功夫不负有心人,终于部署成功啦! 前期准备: 项目名:netauth 系统:百度云服务器下的Ubuntu16.4 软件:xshell(无论如何想办法用这个跟服务器 ...

  7. 第二十六篇-单击事件、Toast(提示框信息)

    单击事件有3种方法: 第一种: layout.xml <?xml version="1.0" encoding="utf-8"?> <Line ...

  8. python 二维数组读入

    study from : https://www.cnblogs.com/reaptomorrow-flydream/p/9613847.html python 二维数组键盘输入 1 m = int( ...

  9. 【非专业前端】使用vue2.5.17+element2.4.5

    开发工具:WebStorm 先搞好环境 可以看出,想安装@vue/cli需要node.js.先去下载安装好. 然后安装@vue/cli npm install -g @vue/clinpm insta ...

  10. Luogu P2336 [SCOI2012]喵星球上的点名

    题目链接 \(Click Here\)_ \(200\)行纯干货的代码,一发\(WA\)掉真的是让人窒息,幸好最后找到了锅在哪.(差点就要弃掉了\(QAQ\)) [调出来的时候真的是要高兴到哭出来了\ ...