Распарсить параметры атрибута style (RegExp)

[BlancoDima]

Помогите с регуляркой для сбора параметров атрибута style. Я совершенно не могу понять как нужно делать.
Мне нужно получить все свойства и значения стилей расположенных в style
Вот пример стиля:

[CSS]'background-image: url(http://mysite.ru:8080/img/environment/circle_portret2.jpg); position: absolute; top: 73px; left: 93px; background-position: 0px 0px; background-repeat: initial initial; '[/CSS]

А получить нужно либо массив либо объект, в котором перечислены свойства и их значения.

Я совершенно не знаю регулярки, и единственное до чего я додумался это перечислить свойства и искать до точки с зяпятой =) http://regex101.com/r/hN4kM1/1

Наверняка кто-нибудь делал|сталкивался, но найти готовое решение не получилось к сожалению.

[skrudjmakdak]

можно и сплитом разбить.. какбэ:

var str = 'background-image: url([url]http://mysite.ru:8080/img/environment/circle_portret2.jpg);[/url] position: absolute; top: 73px; left: 93px; background-position: 0px 0px; background-repeat: initial initial';
var p=str.split(';');
p.forEach(function (val){console.log(val.split(':'));})

[BlancoDima]

var str = 'background-image: url([url]http://mysite.ru:8080/img/environment/circle_portret2.jpg);[/url] position: absolute; top: 73px; left: 93px; background-position: 0px 0px; background-repeat: initial initial';
var p=str.split(';');
p.forEach(function (val){console.log(val.split(':'));})

Сейчас я как раз сплитом и делаю,

function collectStyle( el ) {
	var result = el.split( "; " );
		for ( var i = 0; i < result.length; i++ ) {
			result[ i ] = result[ i ].split( ": " );
		}
	return result;
}

но там неожиданные : бывают, в url например целых 2 раза. Я что бы лишнее не цеплять спличу с пробелом ': ' и '; ' но это до тех пор пока свойства пишутся с пробелами, а на это расчитывать не приходится

[ksa]

Как вариант...

var css='background-image: url("http://mysite.ru:8080/img/environment/circle_portret2.jpg"); position: absolute; top: 73px; left: 93px; background-position: 0px 0px; background-repeat: initial initial; ';
var re1=/(^|;)([^:]*)/g;
var re2=/(:)([^;]*)/g;
do {
	var prp=re1.exec(css);
	var val=re2.exec(css);
	alert(prp[2]+'='+val[2]);
} while (prp!=null);

[ksa]

Вариант без пробелов...

var css='background-image: url("http://mysite.ru:8080/img/environment/circle_portret2.jpg"); position: absolute; top: 73px; left: 93px; background-position: 0px 0px; background-repeat: initial initial; ';
var re1=/(^|;)(\s*)([^:]*)/g;
var re2=/(:)(\s*)([^;]*)/g;
do {
	var prp=re1.exec(css);
	var val=re2.exec(css);
	alert(prp[3]+'='+val[3]);
} while (prp!=null);

[Aetae]

Имхо такие вещи лучше доверять самому браузеру:

var css = 'background-image: url("http://mysite.ru:8080/img/environment/circle_portret2.jpg"); position: absolute; top: 73px; left: 93px; background-position: 0px 0px; background-repeat: initial initial;';
var style = document.createElement('div').style;
    style.cssText = css;
for(var i = style.length, out = {}; i--;){
  out[style[i]] = style.getPropertyValue(style[i]) + style.getPropertyPriority(style[i]);
}
console.log(out)

Конечно таким образом отсются неверные значения(см. background-repeat), но они и так вряд ли нужны.

[BlancoDima]

ksa Спасибо, может не очень красиво, но вариант рабочий вполне!

var css = 'background-image: url("http://mysite.ru:8080/img/environment/circle_portret2.jpg"); position: absolute; top: 73px; left: 93px; background-position: 0px 0px; background-repeat: initial initial;';
var style = document.createElement('div').style;
    style.cssText = css;
for(var i = style.length, out = {}; i--;){
  out[style[i]] = style.getPropertyValue(style[i]) + style.getPropertyPriority(style[i]);
}
console.log(out)

Спасибо, огромное!! Это похоже самый правильный в моём случае вариант, и background* мне в принципе не нужен =) так что пусть их режет.

[alex.vv]

Парсить CSS свойства до точки с запятой не совсем верно, т.к. у CSS есть шортхенды (shorthands) - сокращенные записи свойств.
То есть например эта запись

margin: 1px 2px 3px 4px;

на самом деле представляет из себя запись сразу 4-х свойств:

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

Естественно, есть шортхенды и для других свойств (font, background и пр.)

[ksa]

может не очень красиво

Вот те на...

[BlancoDima]

Вот те на...

Ну в том смысле что не канонично. Но когда это нас останавливало