'style="border:none; overflow:hidden; height:80px"' 通过 python re.sub 到 js 对象

Question

我是前端开发人员并与 IUEditor 一起工作，这可以使 html/css/js 从设计。

但遗憾的是，我们的项目是由 React 构成的，所以我必须将 html 编译为 jsx。所以我自己做了，使用 python，除了剩下一个。

我要改

style="border:none; overflow:hidden; height:80px"

jsx 对象的属性，应该是

style={{border: none, overflow: hidden, height:80px}}

你可能会问，为什么不使用https://facebook.github.io/react/html-jsx.html，其实IUEditor在其他地方使用它是一个属性，而jsx默认不允许使用它们。

无论如何，问题是我想通过 python re.sub 方法将样式 html 标记更改为 jsx 的样式对象。我怎样才能做到这一点？！向正则表达式大师寻求帮助 ;)

Answer 1

可能是 re.search 方法更简单。您获得结果并构建 JSX。我在 Phyton 方面并不完美，但在 JS 中，这可以通过

轻松完成

var str = 'style="border:none; overflow:hidden; height:80px"',
    rex = /\s*[\w-]+\s*:\s*[\w-]+\s*/g,
    res = str.match(rex),
    jsx = "style={{" + res[0] + "," + res[1] + "," + res[2] + "}}";

正则表达式应该相同。在 JS 中你得到一个匹配数组，在 Phyton 中你应该以类似的方式返回一个对象。然后就是重新组合字符串。在控制台上试试。

根据评论确定。这是此代码段的可重用版本。它应该适用于您在内联样式中可能拥有的尽可能多的 CSS 属性。

var str = 'style="border:none; overflow:hidden; height:80px"',
    rex = /\s*[\w-]+\s*:\s*[\w-]+\s*/g,
    res = str.match(rex),
    len = res.length,
    jsx = "style={{";

for (var i = 0; i< len-1; i++){
  jsx = jsx + res[i] + ",";
};
jsx = jsx + res[len-1] + "}}";

'style="border:none; overflow:hidden; height:80px"' 通过 python re.sub 到 js 对象

'style="border:none; overflow:hidden; height:80px"' to js object by python re.sub

javascript

python

regex

jsx

reactjs