'style = "border: none; überlauf: versteckt; height: 80px"' zu js objekt von python re

Question

Ich bin Frontend-Entwickler und arbeiten mit IUEditor, die aus dem Design machen können.

Leider besteht unser Projekt aus React, also muss ich html nach jsx kompilieren. also habe ich es selbst gemacht, mit Python, bis auf eine übrig. ":; Überlauf none: Grenze versteckt; height: 80px"

I

style = ändern müssen

Attribut Objekt JSX, das soll

sein style = {{border: none, überlauf: verdeckt, height: 80px}}

Sie können fragen, warum nicht https://facebook.github.io/react/html-jsx.html verwenden, aber tatsächlich IUEditor verwenden es ein Attribute an anderen Orten, und Jsx erlaubt nicht, sie standardmäßig zu verwenden.

Wie auch immer, das Problem ist, ich möchte Stil HTML-Tag zu Stil Objekt von Jsx von Python Re-Methode ändern. Wie kann ich das machen?! Fragen Sie nach Hilfe von Regex Master;)

Answer 1

Vielleicht ist es einfacher mit re.search Methode. Sie erhalten die Ergebnisse und konstruieren das JSX. Ich bin nicht perfekt bei Phyton aber in JS dies leicht durch

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] + "}}"; 

Die Regex sollte gleich sein erreicht werden könnte. In JS erhalten Sie ein Array von Übereinstimmungen und in Phyton sollten Sie ein Objekt in ähnlicher Weise zurückgeben. Dann geht es darum, die Saite neu zu komponieren. Probieren Sie es auf der Konsole aus.

Ok nach dem Kommentar. Hier ist eine wiederverwendbare Version dieses Snippets. Es sollte für so viele CSS-Eigenschaften funktionieren, die Sie in Ihrem Inline-Stil haben.

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] + "}}";