'style = "border: none; débordement: caché; hauteur: 80px"' à objet js par python re.sub

Question

Je suis développeur frontend et travaillant avec IUEditor, ce qui peut rendre html/css/js à partir de la conception.

Mais malheureusement, notre projet est fait de React, donc je dois compiler html en jsx. donc je l'ai fait moi-même, en utilisant python, sauf un à gauche.

je dois changer

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

attribut à l'objet JSX, qui censé être

style = {{border: none, débordement: masqué, hauteur: 80px}}

Vous pouvez demander, pourquoi ne pas utiliser https://facebook.github.io/react/html-jsx.html, mais en fait IUEditor utilise un attribut à d'autres endroits, et jsx ne permet pas de les utiliser par défaut.

Quoi qu'il en soit, le problème est que je veux changer le style html tag en style objet de jsx par la méthode python re.sub. Comment puis-je faire ceci?! Demandez l'aide des maîtres regex;)

Answer 1

Peut-être que c'est plus simple avec la méthode re.search. Vous obtenez les résultats et construisez le JSX. Je ne suis pas parfait à Phyton mais JS cela pourrait facilement être accompli par

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

Le regex devrait être le même. Dans JS, vous obtenez un tableau de correspondances et dans Phyton vous devriez recevoir un objet de la même manière. Ensuite, il s'agit de recomposer la chaîne. Essayez-le sur la console.

Ok selon le commentaire. Voici une version réutilisable de cet extrait. Cela devrait fonctionner pour autant de propriétés CSS que vous pourriez avoir dans votre style en ligne.

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