Как внедрить PHP Parser в .html() jQuery для ввода текста в режиме реального времени
Я пытаюсь создать предварительный просмотр в реальном времени для текстового редактора, который я создал, но я не могу придумать способ анализа текста внутри элемента предварительного просмотра, чтобы он изменил теги BBCodes (например, [b] [/b]) в HTML.
https://jsfiddle.net/ElenaMcDowell/5hzndj7v/3/
<div class = "previewDocument-box">
<h1>Preview</h1>
<div class = "previewDocument-text"></div>
</div>
<textarea id = "ECEditor" class = "editor-textarea" style = "height: 200px;" name = "editor-text"></textarea>
<script>
$('#ECEditor').on('input', function() {
var ECEtext = $(this).val();
$('.previewDocument-text').html(ECEtext);
});
</script>
Обновлено: мне нужно преобразовать текст, введенный в текстовую область (#ECEditor) и который позже помещается в div (.previewDocument-text), в HTML. У меня уже есть функция PHP (называемая "BBCode2HTML()"), которая преобразует BBCode в HTML (например, [b]Hi[/b] ---> Hi), но я не знаю, как реализовать эту функцию в jQuery. который создает форму «ввода предварительного просмотра в реальном времени». :(
Ответы 1
Мы можем заменить эти теги BBCodes HTML-тегами.
$('#ECEditor').on('input', function() {
var text = $(this).val();
var bb = [
/\[b\](.*?)\[/b\]/ig,
/\[i\](.*?)\[/i\]/ig,
/\[u\](.*?)\[/u\]/ig
];
var bb_html = [
'<b>$1</b>',
'<em>$1</em>',
'<u>$1</u>'
];
for (var i =0;i<bb.length;i++) {
text = text.replace(bb[i], bb_html[i]);
}
$('.previewDocument-text').html(text);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "previewDocument-box">
<h1>Preview</h1>
<div class = "previewDocument-text"></div>
</div>
<textarea id = "ECEditor" class = "editor-textarea" style = "height: 200px;" name = "editor-text"></textarea>Второй метод будет заключаться в отправке введенного значения на серверную часть через ajax и использовании PHP. preg_replace.
preg_replace(['/[b]/i', '/[/b]/i'], ['<b>', '</b>'], $text);