Question

我有一个API返回以下字符串

styles: "background #2b2b2b; color: #FFFFFF"

我需要即时将其转换成这样的对象

styles: { background: '#2b2b2b', color: '#FFFFFF' }

如何最好地实现这一目标

Answer 1

请先进行搜索，然后再询问。人们现在会对您的问题打分。但这还是一个答案...

const str = "background #2b2b2b; color: #FFFFFF"
const obj = str.split('; ').reduce((acc, keyVal) => {
  const [key, val] = keyVal.split(' ')
  acc[key] = val
  return acc
}, {})

console.log(obj) // {background: "#2b2b2b", color:: "#FFFFFF"}

// if str was just 'background #2b2b2b;' it would include the ;
// {background: "#2b2b2b;"}

由于有人提到您的字符串不一致，因此您需要修复字符串格式或添加处理极端情况的方法。

更新：也许更灵活的方法是使用RegExp。我不是最擅长编写RegExps的人，因此可能会得到改进。

// add acceptable characters in the brackets [ ]
const re = /([a-z-]+):\s?([()'"#a-z0-9]+);/gi

const str = 'background: #2b2b2b; color: #FFFFFF;background-url: url("test");'
const styles = {}

let next

while ((next = re.exec(str)) !== null) {
  const key = next[1]
  const value = next[2]
  // or const [ _, key, value ] = next

  styles[key] = value
}

console.log(styles)

/*
{
  background: '#2b2b2b',
  color: '#FFFFFF',
  'background-url': 'url("test")'
}
*/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

Answer 2

正则表达式替代https://regex101.com/r/ZmAW1m

var o = {}, s = "background #2b2b2b; color: #FFFFFF"

s.replace(/([^: ]+)[: ]+([^; ]+)[; ]*/g, (m, k, v) => o[k] = v)

console.log(o)

Answer 3

您可以转换

let styles = "background #2b2b2b; color: #FFFFFF";

进入

stylesObj = {background: styles.split(";")[0].trim().split(" ")[1], 
                       color: styles.split(";")[1].trim().split(" ")[1]}

// {background: "#2b2b2b", color: "#FFFFFF"}

，您应该以所需的形式获取它。

编辑

添加了.trim()，否则如果字符串中有多余的空格，它将不起作用。

动态将字符串转换为对象

3 个答案: