Совместить две функции на js

Question

У меня есть такой код:

const repMap = [    [ "'", [ 'b'        ]   ],
                        [ '"', [ 'i'        ]   ],
                        [ '/', [ 'pre'      ]   ],
                        [ '*', [ '  Совместить с функцией katex  '      ]   ],
                        [ '~', [ 'b', 'i' ] ]   ];

$('.create-block').children().eq(1).find('textarea').on('keyup', function (e) {

    inputArea = block.children().eq(1).find('textarea');
    outputArea = block.children().eq(1).find('.output-area');

    const symbs = repMap.map(([s,r])=>`${s}`).join``;

    $(outputArea).html($(inputArea).val().replace(
        new RegExp(`([${symbs}])[^${symbs}]*[${symbs}]`,'g'),
        (found) => found.replace(
            new RegExp(`\\${found[0]}([^\\${found[0]}]+)\\${found[0]}`,'g'), 
            repMap.find(([c])=>c==found[0])[1].map(c=>`<${c}>`).join``+
            '$1'+ 
            repMap.find(([c])=>c==found[0])[1].reverse().map(c=>`</${c}>`).join``)));

})

Он позволяет заменять текст между символами на нужный (жирный, курсивный), но мне нужно как-то совместить его с такой функцией:

<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>

katex.render(formula, document.querySelector(element));

Она уже позволяет визуализировать мат. формулы в нормальном виде. Как можно добавить эту функцию в код выше, чтобы она работала для текста между звёздочками

Answer 1

const repMap = [    [ "'", [ 'b'        ]   ],
                        [ '"', [ 'i'        ]   ],
                        [ '/', [ 'pre'      ]   ],
                        [ '#', [ 'code' ]   ],   // вместо '*' символ '#'
                                                 // и обрамлять будем в <code>
                        [ '~', [ 'b', 'i' ] ]   ];
//далее всё остается также
$('.create-block').children().eq(1).find('textarea').on('keyup', function (e) {

    inputArea = block.children().eq(1).find('textarea');
    outputArea = block.children().eq(1).find('.output-area');

    const symbs = repMap.map(([s,r])=>`${s}`).join``;

    $(outputArea).html($(inputArea).val().replace(
        new RegExp(`([${symbs}])[^${symbs}]*[${symbs}]`,'g'),
        (found) => found.replace(
            new RegExp(`\\${found[0]}([^\\${found[0]}]+)\\${found[0]}`,'g'), 
            repMap.find(([c])=>c==found[0])[1].map(c=>`<${c}>`).join``+
            '$1'+ 
            repMap.find(([c])=>c==found[0])[1].reverse().map(c=>`</${c}>`).join``)));

// в конце припишем рендеринг формул

  $(outputArea).find('code').each((idx,code)=>{
    let formula = code.innerHTML;
    code.innerHTML='';
    katex.render(formula,code);
  });
})

Заменил звездочку на решетку, так как звездочка часто используется в формулах как умножение.

Я бы еще рекомендовал бы вставить небольшую задержку от ввода, чтобы рендерилось не с каждой буквой, а, например, через 5 секунд после окончания ввода.

И ещё я бы не рекомендовал вешать обработчик на событие keyup. Гораздо эффективнее работает событие input, только лучше у образующей формы, чем у самого элемента <textarea>. Суть в том, что менять текст в поле для ввода можно не только клавиатурой, но и мышкой или чем-либо еще...

БЛОГ НА HUSL

Совместить две функции на js

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