Проверить на лету есть ли текстовая ссылка в contenteditable

Question

Есть html

<div contenteditable="true" id="data" type="text">s</div>

В него вводится текст. Как на лету проверить есть ли в веденном тексте текстовая ссылка, например http://example.ru если такая ссылка есть вывести alert если нет то ни делать ничего.

UPD Но не брать в учет если ссылка уже заключена в тег a

Answer 1

Но не брать в учет если ссылка уже заключена в тег a

Алгоритм следующий: вначале из строки удаляем все теги <a ....>...</a>, а потом в оставшейся строки ищем ссылки.

Под ссылками я понимаю строки, содержащие подстроку http:// или https://

jQuery(function($) {
  function removeA(str) {
//    return str.replace(/<a\s.*?<\/a>/g, "");
    return str.replace(/&lt;a\s.*?&lt;\/a&gt;/g, "");
  }
  
  function isLink(str) {
    return removeA(str).search(/https?:\/\//) !== -1;
  }
  
  $('body').on('input','[contenteditable]', function() {
    if (isLink(this.innerHTML)) {
      console.log("Link");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="data" type="text">s</div>

БЛОГ НА HUSL

Проверить на лету есть ли текстовая ссылка в contenteditable

Ответы (1 шт):