Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Я не разбираюсь в RegExp (https://javascript.ru/forum/misc/22489-ya-ne-razbirayus-v-regexp.html)

Solovei95 22.10.2011 10:43
Великие проблемы с background-image.
 
Я хочу сделать перевод CSS свойств в массив и обратно.
Пример: <div id="block" style="background-image:url(),linear-gradient()"></div>
Я знаю как получить свойства CSS, но не знаю как разбить их на массивы?

Solovei95 22.10.2011 10:45
Неужели прошло 100 лет, а люди так и не научились при помощи JS мастерски приручать CSS. :o

Aetae 22.10.2011 11:12
>Я не разбираюсь в RegExp
Это печально.

И таки да, непонятно, что за массивы то нужны?

Триви 22.10.2011 11:16
А зачем тут регэксп?

<div id="block" style="width:300px; display: block"></div>

 <script>
 var st = document.getElementById('block').getAttribute('STYLE');
  
 var arr = st.split(';'); // в массив
 alert(arr);
  
 var str = arr.join(';');  // обратно
 alert(str);
 </script>

melky 22.10.2011 11:35
писать css-свойства через запятую ?

не маразмируйте. разделяйте правила через ;


Триви,
var st = document.getElementById('block').getAttribute('STYLE');

equals to
<div id="block" style="width:300px; display: block"></div>
<script>alert(document.getElementById('block').*!*style.cssText*/!*)</script>

Solovei95 22.10.2011 11:36
melky,
Да вы ВСЕ не так поняли!
http://javascript.ru/forum/misc/2249...svojjstvo.html
Речь идет о Multiple background

Триви 22.10.2011 11:41
Цитата:
Сообщение от melky (Сообщение 132235)
Триви,
var st = document.getElementById('block').getAttribute('STYLE');

equals to
<div id="block" style="width:300px; display: block"></div>
<script>alert(document.getElementById('block').*!*style.cssText*/!*)</script>
Ага, вылетело из головы это свойство :)

melky 22.10.2011 12:28
ааа..

я сделал это через match
написал такую регу
Код:
/[\w\-]+\([^\)]+\)/g
соответствует или буквам, или дефису(минусу), которых много, и после которых идёт открывающая круглая скобка, в которой находится всё, кроме закрывающей круглой скобки. после этого находится закрывающая круглая скобка.

пример :
// разобрали.
reg = /[\w\-]+\([^\)]+\)/g;

a=document.createElement('div');a.style.cssText='background:url("images/bar.png"), -webkit-linear-gradient(left,red,orange,blue)';

alert(a.style.background); // добавились запятые между цветами в градиенте !!

*!*
var array = a.style.background.match(reg); // это почти массив.
*/!*


alert( *!*[].slice.call(array)*/!*/*а теперь это массив*/.join('\n---------\n') )


ЗЫ долго отвечал) надо было реги повторить. забываются быстро


UPd но есть и минусы

рега не хавает такое
-moz-linear-gradient(bottom, rgb(247,232,44) 49%, rgb(255,255,71) 75%, rgb(255,255,100) 88%)

так что вам придётся убирать цвета в виде rgb(247,232,44) и преобразовывать их в hex.

Aetae 22.10.2011 12:52
На вскидку, если упростить, как-то так: 
/.+?(?=, url|, -moz-linear-gradient|$)/g



<div id="block" style="background:url(clock.png),-moz-linear-gradient(bottom, rgb(247,232,44) 49%, rgb(255,255,71) 75%, rgb(255,255,100) 88%)"></div>
<script>
alert(document.getElementById("block").style.background.match(/.+?(?=, url|, -moz-linear-gradient|$)/g).join('\n'))
</script>


Цитата:
Сообщение от melky (Сообщение 132246)
так что вам придётся убирать цвета в виде rgb(247,232,44) и преобразовывать их в hex.
Хы, хы, браузеру на твои желания пофиг.
<div id="block" style="background:url(clock.png),-moz-linear-gradient(bottom, #F7E82C 49%, #FFFF47 75%, #FFFF64 88%)"></div>
<script>
alert(document.getElementById("block").style.background)
</script>

Solovei95 22.10.2011 13:15
Блин! Я говорю нужна библиотека!

Aetae 22.10.2011 13:28
Что вы таки под этим опять подразумеваете?

Solovei95 22.10.2011 13:35
Ну проблема о5 - он на массив не разбирает! Мне просто нужен особый RegExp для split и все!
Почему помочm не можете?
Мне дано у элемента: 
#box {
  background-image:url(image.png), linear-gradient(bottom, rgb(76,47,92) 41%, rgb(107,76,120) 71%, rgb(140,107,156) 86%);
}

Нужно чтобы получилось:
array[0] = "url(image.png)";
array[1] = "linear-gradient(bottom, rgb(76,47,92) 41%, rgb(107,76,120) 71%, rgb(140,107,156) 86%)";


Я только знаю, что при помощи join можно начать обратный процесс:
background = array.join(",");

Aetae 22.10.2011 13:45
Разбирает:
<div id="block" style="background:url(clock.png),-moz-linear-gradient(bottom, #F7E82C 49%, #FFFF47 75%, #FFFF64 88%)"></div>
<script>
function st(prop){
return typeof prop == 'string' ? prop.match(/[^, ].+?(?=, url|, -moz-linear-gradient|$)/g) : prop.join(', ')
}
a=document.getElementById("block").style;



alert(st(a.background).join('\n\n'))

b=['url(no.png)'];
a.background=st(b);
alert(st(a.background).join('\n\n'))
</script>

Solovei95 22.10.2011 13:53
Aetae,
Я все равно не понимаю - у тебя вообще не массив (точнее не объект)...
Кароче - есть что-нибудь более понятное?

dmitriymar 22.10.2011 13:58
Цитата:
Сообщение от Solovei95
Я все равно не понимаю - у тебя вообще не массив (точнее не объект)...
Кароче - есть что-нибудь более понятное?
ну как это не объект? объект и пройтись по всем его свойствам не составляет труда,так же как узнать их имена и значения

Aetae 22.10.2011 13:59
Блджад. *facepalm*
<div id="block" style="background:url(clock.png),-moz-linear-gradient(bottom, #F7E82C 49%, #FFFF47 75%, #FFFF64 88%)"></div>
<script>

function st(prop){
return typeof prop == 'string' ? prop.match(/[^, ].+?(?=, url|, -moz-linear-gradient|$)/g) : prop.join(', ')
}

backgroundImage = document.getElementById("block").style.backgroundImage;

array=st(backgroundImage);

alert(array[0])
alert(array[1])

</script>

Так понятее?
Цитата:
Сообщение от Solovei95 (Сообщение 132257)
Нужно чтобы получилось:
array[0] = "url(image.png)";
array[1] = "linear-gradient(bottom, rgb(76,47,92) 41%, rgb(107,76,120) 71%, rgb(140,107,156) 86%)";

Solovei95 22.10.2011 14:18
Все - понятно! Но можно ли найти что-то общее:
url -moz-linear-gradient
В RegExp.

Aetae 22.10.2011 14:29
Можно, но включить все варианты вручную - надежнее.
Как-то так:
/[^, ].+?(?=, [a-z\-]{4,}|$)/g

Solovei95 22.10.2011 14:46
удалил коммент

Aetae 22.10.2011 14:50
Хех, я какбэ и так универсальную функцию сделал:
global.splitCssProp(prop){
  return typeof prop == 'string' ? prop.match(/[^, ].+?(?=, [a-z\-]{4,}|$)/g) : *!*prop.join(', ')*/!*;
}

Те, если аргументом идёт массив, то она возвращает строку.)
Совсем вы, твоварисчъ, бездумно копируете.

Solovei95 22.10.2011 14:52
Простите - не так написал...
У меня часто бывает так.

Solovei95 22.10.2011 15:00
Ладно - спс. Если есть получше - пишите!
Я пересел на Mozilla Firefox 10.0 (раньше на хроме сидел).
Все таки хром (Dev сборка) стала нестабильно отображать страницы...

Aetae 22.10.2011 15:16
Остался один вопрос: на кой оно нужно было?)

Solovei95 22.10.2011 15:19
Я скажу зачем оно нужно было:
Дело в том, что мне трудно работать с multiple background.
Есть проблемы с split. При помощи split можно только background-size.
А если нужно background-image то тут нужно что-то помощнее!

Solovei95 22.10.2011 15:21
Можно ли аналогичным способом, как у тебя, делить пробелы?
Например: solid 1px rgb(0, 0, 0);

Aetae 22.10.2011 15:50
Можно:
d='solid 1px rgb(0, 0, 0)';
alert(
d.match( /[^ ].+?[^,](?= |$)/g )
.join('\n\n')
)

Но по-моему это надмозги.
В данном случе вообще нативные border-style/size итд лучше юзать.

Solovei95 22.10.2011 16:39
Aetae,
Заключительный вопрос! Возможно ли разделить background-size на две части?
т.е. width и height.

melky 22.10.2011 18:01
да. можно. руками.

Цитата:
Сообщение от Aetae (Сообщение 132250)
На вскидку, если упростить, как-то так: 
/.+?(?=, url|, -moz-linear-gradient|$)/g
match => null. хром.
лаже, если вскормить строку.

Aetae 22.10.2011 18:56
Дык на работе у меня ток фф, так что хз. Да -moz-linear-gradient какбе говорит нам.)
Приведи ту строку, что хром выдаёт .style.backgroundImage .

melky 23.10.2011 04:15
я же сказал, если вскормить строку.
свойство он понятное дело не поймет )

Aetae 23.10.2011 04:47
Все работает нормально.(на то оно и regexp)
Не работать могло из-за того, что в примере из этой темы после запятой нет пробела. Браузер пробел ставит, потому всё гуд. Если нужно парсиь ещё и неформатированные строки, то тут уж разрастется regexp естесно, но это уже не моё дело.
prop="url(clock.png), -moz-linear-gradient(bottom, #F7E82C 49%, #FFFF47 75%, #FFFF64 88%)"
alert(prop.match(/[^, ].+?(?=, url|, -moz-linear-gradient|$)/g).join('\n\n'))


Да и вообще в хроме всё также отлично работет:
<div id="block" style="
width:800px;height:132px;
background-image:url(http://javascript.ru/forum/images/smilies/sad.gif),
-webkit-gradient(linear,center bottom,center top, color-stop(49%, #F7E82C), color-stop(75%, #FFFF47), color-stop(88%, #FFFF64)); 
background-image:url(http://javascript.ru/forum/images/smilies/sad.gif),
-moz-linear-gradient(bottom, #F7E82C 49%, #FFFF47 75%, #FFFF64 88%);
"></div>

<script>

function st(prop){
 return typeof prop == 'string' ? prop.match(/[^, ].+?(?=, url|, linear-gradient|, -moz-linear-gradient|, -webkit-gradient|$)/g) : prop.join(', ');
}
a=document.getElementById("block").style;

alert(st(a.backgroundImage).join('\n\n'))

</script>

Запарил мозги бедному человеку.:(

melky 23.10.2011 05:24
точно! я забыл про это

ответ можно было написать в 1 строчку :)
Цитата:
Сообщение от Aetae (Сообщение 132335)
Не работать могло из-за того, что в примере из этой темы после запятой нет пробела. Браузер пробел ставит, потому всё гуд.


Часовой пояс GMT +3, время: 12:32.