使用正则表达式来实现这一点将是一项艰巨的任务。例如，CSS值可能包含一个;字符，如下所示：

background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)

此外，CSS属性可以有括号，必须平衡，并引用字符串，如：

background: cross-fade(20% url('first.png'), url("second.png"));

因此，正确地识别值的开始和结束位置并不是微不足道的。
另一种方法是使用DOM解析器。在JavaScript中，您可以使用DOMParser，然后将样式字符串作为HTML属性，并从DOM中读回style属性。这将为您提供已在元素上显式设置的CSS属性列表及其相应的值。
这可能是一个比原始字符串更复杂的格式，给出了单独的CSS属性，其中原始字符串可能使用了更高级别的组合属性，但含义是等效的。
下面是它在您的示例中的工作原理：

function convert(s) {
    const [{style}] = new DOMParser().parseFromString(`<br ${s}>`, "text/html").body.children;
    const obj = Object.fromEntries(Array.from(style, prop => [prop, style[prop]])); 
    return `style={${JSON.stringify(obj)}}`;
}

const s = 'style="width: 100%; max-width: 800px; margin: 0 auto;letter-spacing: 1px;"';
const result = convert(s);

console.log(result);