主页 / 问题 / 682493
Accepted
Yuri
Asked:2020-06-22 20:32:02 +0000 UTC2020-06-22 20:32:02 +0000 UTC

检查元素是否在标签中

  • 772

我想做一个轻量级的可视化文本编辑器。为此，我使用了添加 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]или код.
javascript

1 个回答

  1. Best Answer

    解决方案可能是这样的：

    1. 查找最靠近所选文本右侧的子字符串[b]和[/b]。
    2. 根据哪个更近，我们确定所选文本是否在标签内。

    在下面的示例中，使用组合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>

    • 3

相关问题