用React兼容的样式替换所有HTML样式属性

Question

我目前正在迁移我的博客，并希望用 React 兼容的属性替换我的 HTML 中的所有样式属性。

例如：

<div style="display: flex; flex-direction: row; justify-content: flex-start">

需要变成。

<div style={{ display: "flex"; flexDirection: "row"; justifyContent: "flex-start" }}>

因此，在键中需要用驼峰式替换-。 值需要用"包装，整个style属性的"需要替换为{{和}}。

到目前为止，我已经编写了以下函数。

function toReactStyle(str) {
  return str
    ?.toLowerCase()
    .replace(";", ",")
    .replace(/-(.)/g, function ($1) {
      return $1.toUpperCase();
    })
    .replace("-", "");
}


const $ = cheerio.load(node.value);
const div = $("div");
const style = div.attr("style");
div.attr("style", `{{${toReactStyle(style)}}}`);

然而，这并没有涵盖完整的期望结果，也不太有效率。值周围没有引号。只有第一个连字符被删除。

{{display: flex, justifyContent: flext-Start; align-Items: center;}}

我也尝试过寻找一些现有的库来为我完成这个操作，但到目前为止还没有找到。有人知道有哪些现有的库可以做到这一点吗？或者有哪位熟悉Rockstar正则表达式技巧的人能解释应该使用哪个正则表达式以及该正则表达式的工作原理吗？

我遇到的问题是只需要给值加上引号，并且只将键转换成驼峰命名法，并且只移除键中的-。

- Marco

---

试试吧兄弟 :v。https://magic.reactjs.net/htmltojsx.htm - thelonglqd

我需要一些东西来放入我的脚本中。不想手动运行所有的博客文章来运行它。 - Marco

Answer 1

您可以使用

const $ = cheerio.load(node.value);
const div = $("div");
const style = div.attr("style");
const newstyle = "{{ " + s.replace( /([\w.-]+):\s*([^\s;]*)/g, (x,y,z) => `${y.replace(/-(.)/g, (m,n) => n.toUpperCase())}: "${z}"`) + "}}";
div.attr("style", newstyle);

([\w.-]+):\s*([^\s;]*)正则表达式匹配并捕获键（在第1组）和值（在第2组），然后将第1组值转换为所需格式，并与第2组值连接。

请参见正则表达式演示。

JavaScript演示：

const oldstyle = "display: flex; flex-direction: row; justify-content: flex-start";
console.log(
  "{{ " + oldstyle.replace( /([\w.-]+):\s*([^\s;]*)/g, (x,y,z) => `${y.replace(/-(.)/g, (m,n) => n.toUpperCase())}: "${z}"`) + "}}"
)

- Wiktor Stribiżew

---

谢谢，这就解决了问题，所以括号内的所有内容都是捕获组。x 是完整的捕获，y 和 z 是捕获组。 - Marco