Formulaire générant le code html pour une image et inversement

Hello hello j'ai l'impression de me compliquer la vie vous me direz d: ... J'ai un formulaire pour tinyMCE me permettant d'insérer une image jusque là aucun problème mon code JS pour créer l'image si desous.
Mon formulaire ressemble à

image.html = function(){
        var html = '';
        var style = '';
        // Attribut src="" alt="" et class=""
        if(form.src) html += ' src="'+form.src+'"';
        if(form.alt) html += ' alt="'+form.alt+'"';
        if(form.class) html += ' class="'+form.class+'"';
        // Dimenssions css
        if(form.width) style += 'width:'+form.width+form.unitW+';';
        if(form.height) style += 'height:'+form.height+form.unitH+';';
        // Alignement css
        if(form.align == 'left' || form.align == 'right') style += 'float:'+form.align+';';
        if(form.align == 'center') style += 'display:block;margin-left:auto;margin-right:auto;';
        // Attribut style="" et css suplémentaires
        if(style || form.style) html += ' style="'+style+form.style+'"';
        return '<img'+html+'>';
    }

Dans le sens inverse ça se complique ^^

image.setFromHtml = function(html){
        form = {};
        var elem = angular.element(html);// Sous AngularJS
        if(elem.attr('src')) form.src = elem.attr('src');
        if(elem.attr('alt')) form.alt = elem.attr('alt');
        if(elem.attr('class')) form.class = elem.attr('class');
        form.style = elem.attr('style');// le style complet
        if(elem.css('width')){
            var fullWidth = elem.css('width');
            var match = fullWidth.match(/(\d*\.?\d*)(.*)/);// je sépare l'unité du nombre
            form.width = parseFloat(match[1], 10) || null;// je valide le nombre
            if(form.width && (match[2] == 'px' || match[2] == 'em' || match[2] == '%')) form.unitW = match[2];// je check l'unité
            else form.unitW = 'px';// Sinon unité par defaut
            form.style = form.style.replace(/(?:width:^;]*;)/, '')// Je retire le width de mon style
        }
        if(elem.css('height')){// identique a width
            var fullHeight = elem.css('height');
            var match = fullHeight.match(/(\d*\.?\d*)(.*)/);
            form.height = parseFloat(match[1], 10) || null;
            if(form.height && (match[2] == 'px' || match[2] == 'em' || match[2] == '%')) form.unitH = match[2];
            else form.unitH = 'px';
            form.style = form.style.replace(/(?:height:^;]*;)/, '');
        }
                // Je check si j'ai placer un des alignements et je les retires du style 
        if(elem.css('display') == 'block' && elem[0].style.marginLeft == 'auto' && elem[0].style.marginRight == 'auto' ){
            form.align = 'center';
            form.style = form.style.replace(/(?:display:^;]*;)/, '').replace(/(?:margin-left:^;]*;)/, '').replace(/(?:margin-right:^;]*;)/, '');
        } else if (elem.css('float') == 'left'){
            form.align = 'left';
            form.style = form.style.replace(/(?:float:^;]*;)/, '');
        } else if (elem.css('float') == 'right'){
            form.align = 'right';
            form.style = form.style.replace(/(?:float:^;]*;)/, '');
        }
    }

J'ai pas trouvé plus simple que de passer pas jQuery pour parser la plus part de les attributs et mon CSS rajouter avec des regex dans tous les sens pour récupéré mon objet form si quelqu'un à des suggestions pour simplifier le code c'est avec plaisir. Merci