Регулярное выражение + вставить изображения
Здравствуйте! Подскажите регулярку.
Из url: http://....../#page=reviews?id=2?§ion=1?&status=5 и т.д. Нужно получить id,section,status все после знака равно до вопросительного если имеется. Было бы здорово функцию, для каждой переменой присваивать значение, к примеру:
var id = function('id');
var section= function('section');
var status= function('status');
И ещё такой вопрос. Есть редактируемый div, по клику вставляются в него смайлы, но почему то фокус всегда сбрасывается в самое начало.
function smile_add(src){
$('.block').html($('block').html() + '<img class="smile" src="'+src+'"/>');
$('.block').focus();
}
Благодарю за помощь! |
Цитата:
var url='http://....../#page=reviews?id=2?§ion=1?&status=5 ';
alert(getPrm('id',url))
alert(getPrm('section',url))
alert(getPrm('status',url))
function getPrm(Name,Url){
var reg=new RegExp(Name+'=[^?&]*');
return Url.match(reg).toString().split('=')[1];
};
Но это если переменные не повторяются... |
Цитата:
Цитата:
|
ksa, благодарю, переменные всегда разные. Погуглил понял, что с div contenteditable не все так просто со вставкой. К примеру:
Текст текст [тут каретка], если данным кодом вставляем смайл, то получается так: Текст текст [тут каретка] смайл. А хотелось бы, что бы каретка перемещалась и вставала после смайла.
<div contenteditable="true" onFocus="contenteditable_placeholder('text_edit');" onblur="contenteditable_placeholder('text_edit');" class="text_edit">Введите текст...</div>
function smile_add(src){
$('.text_edit').html($('.text_edit').html() + '<img class="smile" src="'+src+'"/>');
$('.text_edit').focus();
}
|
Цитата:
Но у нас есть варианты... ;) http://javascript.ru/forum/css-html/...tri-tegov.html |
по вставкам и кареткам
https://learn.javascript.ru/range-textrange-selection |
ksa, там речь о textarea вроде как, не?)
|
ksa,
var id = getPrm('id');
function getPrm(Name){
var url = window.location.href;
var reg = new RegExp(Name+'=[^?&]*');
return url.match(reg).toString().split('=')[1];
}
Если в url нет get, то ошибка и загрузка останавливается, ругается на: Cannot read property 'toString' of null. Если в урл нет переменных, возможно, что бы возвращало пусто значение? |
function getPrm(Name, url){
url = url || window.location.href;
var m = RegExp(Name + '=([^?&#]*)').exec(url);
return m ? m[1] : '';
}
|
Alexandroppolus, благодарю. С contenteditable не совсем понятно. Возможно ли смайл вставлять в то место, где находится каретка?
|
Цитата:
var url='http://....../#page=reviews?id=2?§ion=1?&status=5 ';
alert(getPrm('id',url))
alert(getPrm('section',url))
alert(getPrm('status',url))
alert(getPrm('test',url))
function getPrm(Name,Url){
var reg=new RegExp(Name+'=[^?&]*');
return reg.test(Url)? Url.match(reg).toString().split('=')[1]: '';
};
|
Благодарю, с регулярками разобрался. С contenteditable кареткой не все так просто оказалось :( . Возможно ли хотя бы вставить смайл в местоположение каретки, а не в самый конец?
|
Цитата:
http://web-answers.ru/questions-and-...mesto-kursora/ |
|
Alexandroppolus, работает, благодарю, но есть недочет, если див не в фокуса, а просто сразу вставляешь изображение, то вставляется вне div, и если div пустой, то первым смайл не ставится. Извиняюсь, а класс можно для img добавить? В консоле:
Uncaught TypeError: div.focus is not a function at smile_add (smile.js:181) at HTMLImageElement.onclick (VM20820 :1) Вот посмотрите скрин: http://joxi.ru/n2YYWbPco4D3k2 |
https://jsfiddle.net/5frtszko/
добавил класс для картинки сделал проверку, что каретка (или выделенный кусок) строго внутри div |
Alexandroppolus, благодарю. Жаль карму плюсануть больше не могу. Попробуйте без фокуса на div нажать input.
|
У меня что-то совсем бяда, не вставляются вообще:
<img src="/images/smile/<?=$i;?>.gif" class="smile_add" onclick="smile_add('reviews_text_edit','/images/smile/<?=$i;?>.gif');">
<div contenteditable="true" onFocus="text_edit_div('reviews_text_edit');exit_smile();" onblur="text_edit_div('reviews_text_edit');" class="reviews_text_edit">Введите текст...</div>
function smile_add(div, src) {
var sel = window.getSelection();
if (!sel || !sel.rangeCount) { return; }
var r = sel.getRangeAt(0);
if (!r) { return; }
for (var n = r.commonAncestorContainer; n != div; n = n.parentNode) {
if (!n) { return; }
}
var img = new Image();
img.className = 'my-img';
img.src = src;
r.deleteContents();
r.insertNode(img);
r = document.createRange();
r.selectNode(img);
r.collapse(false);
sel.removeAllRanges();
sel.addRange(r);
try {
div.focus();
} catch(exc) {}
}
|
Alexandroppolus, благодарю разобрался. Фокус сразу устанавливаю во время открытия окна со смайлами. Бывает маленько не четко работает, но это ерунда впринцепе (не всегда почему то в конец вставляется).
У меня еще вопрос по поводу регулярки, добавить нужно к этой функции. Перед вставкой, проверить количество вставленных уже в div смайлов, я думаю может просто посчитать количество тегов в div (img). К примеру если больше 10 штук, то открыть спрятанный div с предупреждающим текстом. Подскажите регулярку для подсчета, благодарю! |
shyxeroks,
тут регулярки не нужны, просто смотри сколько картинок с таким классом внутри твоего редактируемого дива
div.querySelectorAll('img.my-img').length
ну и, разумеется, всё равно надо будет на сервере проверку сделать, если это критично. |
Alexandroppolus, я сделал так:
////// открыть div со смайлами
function open_smile(div){
if($('.smile_block').css('display') == 'none'){
$('.'+div).focus();
$('.smile_block').fadeIn(500);
$('.smile').css('opacity','1');
}
}
//// вставить смайл
function smile_add(div, src){
var block = document.querySelector(div);
var test = div.querySelectorAll('img.smile_add_block').length;
alert(test)
var sel = window.getSelection();
if (!sel || !sel.rangeCount) { return; }
var r = sel.getRangeAt(0);
if (!r) { return; }
for (var n = r.commonAncestorContainer; n != block; n = n.parentNode) {
if (!n) { return; }
}
var img = new Image();
img.className = 'smile_add_block';
img.src = src;
r.deleteContents();
r.insertNode(img);
r = document.createRange();
r.selectNode(img);
r.collapse(false);
sel.removeAllRanges();
sel.addRange(r);
try {
block.focus();
}catch(exc){}
}
В консоли ругается на querySelectorAll. Еще такой вопрос, querySelector ищет на странице только один элемент, а querySelectorAll все элементы на странице, то бишь это div переданный в функцию, правильно? С php проблем нет, js на стадии изучения, благодарю) У нас же уже есть переменная var block = document.querySelector(div); Может block использовать просто нужно? |
https://jsfiddle.net/5nn9t4j6/
Цитата:
у тебя есть див. Собери по нему картинки, посмотри количество. Больше ничего не надо квериСелектить. |
Alexandroppolus, не знаю почему, но консоль ругается на querySelectorAll. Вот весь код:
<div class="smile_block">
<span class="smile_close" onclick="exit_smile();">X</span>
<?for($i=1;$i<=48;$i++){?>
<img src="/images/smile/<?=$i;?>.gif" class="smile_add" onclick="smile_add('<?=$smile_pages_info;?>','/images/smile/<?=$i;?>.gif');">
<?}unset($i);?>
<div class="smile_error">Не больше 3-ех в одной записи/письме/сообщении.</div>
</div>
////// открыть блок со смайлами
function open_smile(div){
if($('.smile_block').css('display') == 'none'){
$('.'+div).focus();
$('.smile_block').fadeIn(500);
$('.smile').css('opacity','1');
}
}
////// закрыть блок со смайлами
function exit_smile(){
if($('.smile_block').css('display') == 'block'){
$('.smile_block').fadeOut(500);
$('.smile').css('opacity','');
}
}
///// вставить смайл
function smile_add(div,src) {
if (div.querySelectorAll('img.smile_add_block').length > 3) {
$('.smile_error.').fadeIn(500);
$('.smile_error').delay(3000).fadeOut(500);
try { div.focus(); } catch(exc) {}
return;
}
var sel = window.getSelection();
if (!sel || !sel.rangeCount) { return; }
var r = sel.getRangeAt(0);
if (!r) { return; }
for (var n = r.commonAncestorContainer; n != div; n = n.parentNode) {
if (!n) { return; }
}
var img = new Image();
img.className = 'smile_add_block';
img.src = src;
r.deleteContents();
r.insertNode(img);
r = document.createRange();
r.selectNode(img);
r.collapse(false);
sel.removeAllRanges();
sel.addRange(r);
try { div.focus(); } catch(exc) {}
}
По-моему я запутался уже :help: В консоле ошибка: Uncaught TypeError: Cannot read property 'querySelectorAll' of null at smile_add (smile.js:64) at HTMLImageElement.onclick (VM43380 :1) |
Все разобрался. Вопрос снят. Благодарю!!!
|
| Часовой пояс GMT +3, время: 03:01. |