javascript - 用 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" }}>

所以 -需要用键中的驼峰式替换。这些值需要用 " 包裹起来和 "整个样式属性需要替换为 {{和 }} .
到目前为止，我做了以下功能。

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 Regex 技能的人都可以解释使用哪个 Regex 以及 Regex 的工作原理？
我努力的事情是只用引号将值包装起来。并且只用驼峰命名键并只删除 -从 key 。

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;]*) regex 匹配并捕获键(进入第 1 组)和值(进入第 2 组)，然后将第 1 组值转换为所需格式并与第 2 组值连接。
见 regex demo .
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}"`) + "}}"
)