contenteditable элементы с разметкой для ссылок «на лету» (JS, jQuery)

Question

Я строю худощавый & чистый текстовый редактор на основе html/js, аналогичный текстовому инструменту Medium. Я использую contenteditable, чтобы сделать divs доступными для редактирования.

Я хотел бы добавить встроенную разметку для текстовых ссылок (например, ввод [[Google|https://www.google.com]] мгновенно преобразуется в <a href='https:www.google.com'>Google</a>, то есть Google). Все это должно происходить «на лету», т. Е. При наборе текста. То есть, когда пользователь вводит второе закрытие] разметки ссылки или фокус курсора установлен за пределами элемента [[text|url]], JS распознает это событие и мгновенно преобразует [[text|url]] в html-ссылку. С другой стороны, если фокус установлен на существующую текстовую ссылку (то есть внутри тега html <a>...</a> внутри редактируемого div, (1) поведение открытия по умолчанию канала блокируется и (2) текстовая ссылка мгновенно преобразуется обратно в версия разметки для редактирования (например, Google становится [[Google|https://www.google.com]]).

Я не очень хорошо знаком с регулярным выражением в JS. Любая идея, как это можно сделать?

большое спасибо за вашу помощь.

PS: Я использую jQuery 1.11.0

PSS: Отключенное поведение s чем аналогично этому текстовому редактору, когда обратная ссылка на ссылку (удаление) преобразует ссылку в версию разметки, а ввод закрытия] конвертирует версию разметки в ссылку). Разница в том, что я не отделяю поле записи от показанного текста, все происходит внутри.

Answer 1

Отъезд fiddle.

Это всего лишь образец.

Он преобразует [[Google|https://www.google.com]] в <a href='https://www.google.com'>Google</a>, то есть Google.

Я использовал this Регулярное выражение для определения встроенной разметки.

У него есть некоторые ошибки, но я думаю, что это поможет вам реализовать то, что вам нужно.

Это фрагмент.

$('.editor').keyup(function(e) { 
 
    if (e.keyCode === 221) { 
 
    var text = $('.editor').html(); 
 
    var match = /\[\[(.+)\|(https?:\/\/.*\..+)\]\]/g.exec(text); 
 
    if (match !== null) { 
 
     text = text.replace(match[0], "<span><a href='" + match[2] + "'>" + match[1] + "</a></span>"); 
 
     $('.editor').html(text); 
 
    } 
 
    } 
 
});

.editor { 
 
    position: absolute; 
 
    border: black dashed 2px; 
 
    left: 5%; 
 
    right: 5%; 
 
    top: 10%; 
 
    bottom: 10%; 
 
    padding: 15px; 
 
    font-family: 'Lucida Console'; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="editor" contenteditable='true'>This is the Editor. write something here.</div>