Проверка, находится ли элемент в теге

270

23 июня 2017, 10:16

Хочу сделать лёгкий визуальный редактор текста. Для этого использовал стандартную функцию добавления BB кодов.

$(document).ready(function() { 
  $('.bb_bar a').click(function() { 
    var button_id = attribs = $(this).attr("alt"); 
    button_id = button_id.replace(/\[.*\]/, ''); 
    if (/\[.*\]/.test(attribs)) { 
      attribs = attribs.replace(/.*\[(.*)\]/, ' $1'); 
    } else attribs = ''; 
    var start = '[' + button_id + attribs + ']'; 
    var end = '[/' + button_id + ']'; 
    insert(start, end); 
    return false; 
  }); 
}); 
 
function insert(start, end) { 
  element = document.getElementById('user_text'); 
  if (document.selection) { 
    element.focus(); 
    sel = document.selection.createRange(); 
    sel.text = start + sel.text + end; 
  } else if (element.selectionStart || element.selectionStart == '0') { 
    element.focus(); 
    var startPos = element.selectionStart; 
    var endPos = element.selectionEnd; 
    element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length); 
  } else { 
    element.value += start + end; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bb_bar"> 
  <a href="#" alt="b">Жирный</a> 
  <a href="#" alt="i">Курсив</a> 
  <a href="#" alt="u">Подчеркнутый</a> 
  <a href="#" alt='a[href=""]'>Ссылка</a> 
</div> 
<textarea id="user_text">апрап апраркаер кер кен кн ке рапрапрап аррукерек апраопр укеекврпап ропроенгк вапвке рнооапрок</textarea>

Проблема в том, что если выделенный текст уже находится в [b]...[/b], то при повторном нажатии оно снова установит [b]...[/b], а нужно чтобы [/b]...[b]. Т.е. чтобы оно не вставляло элемент в элемент, а делало исключение.

Пример, для тех кто не понял:

Вот у нас есть текст с BB:

Люб[b]ой текст, где мы встав[/b]или код.

При выделении текста, который находится уже в [b]...[/b], оно сделает так:

Люб[b]ой текст, [b]где[/b] мы встав[/b]или код.

А нужно, чтобы было так:

Люб[b]ой текст, [/b]где[b] мы встав[/b]или код.

Answer 1

Решение может быть таким:

Находим ближайшие справа к выделенному тексту подстроки [b] и [/b].
В зависимости от того, какая из них ближе, определяем, находится ли выделенный текст внутри тега.

В примере ниже добавление жирности происходит с помощью комбинации CtrlB (используется библиотека Mousetrap).

Для удобной замены выделенного текста используется библиотека Rangy Inputs.

Mousetrap.bind('ctrl+b', function() { 
  let textarea = $('textarea'); 
  let text = textarea.val(); 
 
  let selection = textarea.getSelection(); 
  let indexOpen = text.indexOf('[b]', selection.end); 
  let indexClose = text.indexOf('[/b]', selection.end); 
 
  let direct = indexClose === -1 || 
    indexOpen !== -1 && indexClose !== -1 && indexOpen < indexClose; 
  let appendBefore = direct ? '[b]' : '[/b]'; 
  let appendAfter = direct ? '[/b]' : '[b]'; 
  textarea.replaceSelectedText(appendBefore + selection.text + appendAfter); 
});

textarea { 
  height: 200px; 
  width: 500px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.1/mousetrap.min.js"></script> 
<script src="https://rawgit.com/timdown/rangyinputs/master/rangyinputs-jquery.js"></script> 
 
<textarea class="mousetrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>