Распарсить параметры атрибута style (RegExp)
Помогите с регуляркой для сбора параметров атрибута 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 Наверняка кто-нибудь делал|сталкивался, но найти готовое решение не получилось к сожалению. :help: |
можно и сплитом разбить.. какбэ:
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 раза. Я что бы лишнее не цеплять спличу с пробелом ': ' и '; ' но это до тех пор пока свойства пишутся с пробелами, а на это расчитывать не приходится |
Как вариант...
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);
|
Вариант без пробелов...
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);
|
Имхо такие вещи лучше доверять самому браузеру:
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), но они и так вряд ли нужны. |
ksa Спасибо, может не очень красиво, но вариант рабочий вполне!
Цитата:
|
Парсить CSS свойства до точки с запятой не совсем верно, т.к. у CSS есть шортхенды (shorthands) - сокращенные записи свойств.
То есть например эта запись margin: 1px 2px 3px 4px; на самом деле представляет из себя запись сразу 4-х свойств: margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; Естественно, есть шортхенды и для других свойств (font, background и пр.) |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 06:06. |