Как заменять слова/предложения между определёнными символами?

Question

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

$('.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');
    outputArea.html(inputArea.val().replace(/"([^"]+)"/g, '<strong>$1</strong>'));
})

Он позволяет мне изменять шрифт слов/предложений между кавычками на жирный, но как мне сделать сразу несколько замен, например:
слова/предложения между ' ' -> жирный текст
слова/предложения между " " -> курсивный текст
слова/предложения между ~ ~ -> курсивный жирный текст и т.д., т.е выполнять сразу все замены?

Answer 1

Ну так и делать последовательно, по порядку.

$('p').each((i,p)=>$(p).html($(p).html()
   .replace(/\'[^\']+\'/g,`<b>$&</b>`)
   .replace(/\~[^\~]+\~/g,`<i><b>$&</b></i>`)
   .replace(/\"[^\"]+\"/g,`<i>$&</i>`)));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
'слова'/предложения 'между' -> 'жирный' текст
</p><p>
"слова"/предложения "между" -> "курсивный" текст
</p><p>
~слова~/предложения ~между~ -> ~курсивный~ жирный текст 
</p>

Еще можно с одним replace. Но это на любителя.

const repMap = [["'",['b']],['"',['i']],['~',['b','i']]];
$('p').each((i,p)=>{
let html = $(p).html();
for(const [s,r] of repMap)
   html=html.replace(
new RegExp(`\\${s}[^\\${s}]+\\${s}`,'g'),
`${r.map(r=>`<${r}>`).join``}$&${(r.reverse().map(r=>`</${r}>`).join``)}`);
$(p).html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
'слова'/предложения 'между' -> 'жирный' текст
</p><p>
"слова"/предложения "между" -> "курсивный" текст
</p><p>
~слова~/предложения ~между~ -> ~курсивный~ жирный текст 
</p>

Или даже вот так. Но это тоже на любителя. Зато карта замены может быть безгранично большая - весь код написан.

/** Карта замен */
const repMap = [ [ "'", [ 'b'      ] ],
                 [ '"', [ 'i'      ] ],
                 [ '~', [ 'b', 'i' ] ] ];

/** Сразу построим список символов */
const symbs = repMap.map(([s,r])=>`${s}`).join``;

/* Для каждого <p> */
$('p').each((i,p)=>{
  /* заменяем innerHTML текущего тега <p> */
  $(p).html($(p).html().replace(   /* передаем replace() 2 параметра: */
    new RegExp(`([${symbs}])[^${symbs}]*[${symbs}]`,'g'), /* регулярку, */
    /* и функцию колбэк, которая отвечает за замену найденного выражения. */
    (found) => found.replace( /* Еще раз вызываем replace(), */
    /* но на этот раз регулярка будет содержать не список символов, а конкретный символ. */
     new RegExp(`\\${found[0]}([^\\${found[0]}]+)\\${found[0]}`,'g'), 
     /* Выражение замены состоит из тегов repMap.
        Если указано несколько тегов, например, ['b','i'], то выражение обрамится
        в <b><i> в начале выражения и </i></b> в конце выражения. */
     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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
'слова'/предложения 'между' -> 'жирный' текст
</p><p>
"слова"/предложения "между" -> "курсивный" текст
</p><p>
~слова~/предложения ~между~ -> ~курсивный~ жирный текст 
</p>

БЛОГ НА HUSL

Как заменять слова/предложения между определёнными символами?

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