Блог

Главная - Вопросы по программированию - Показывать текст всплывающей подсказки в строке с пользовательскими тегами

Показывать текст всплывающей подсказки в строке с пользовательскими тегами

#javascript #regex #string #replace

Вопрос:

У меня есть строка с пользовательскими тегами, и я пытаюсь получить текст для всплывающей подсказки и добавить его в соответствующий lt;spangt; заголовок. Я заменил пользовательский [message] тег на lt;spangt; «но как получить свойство text по коду«. Я попробовал несколько вариантов с match и includes , но, возможно, я ошибаюсь. Если кто-нибудь сможет мне помочь, я буду очень благодарен. Спасибо.

 let obj = [  {  code: 'MESSAGE_1',  text: 'Basic tooltip text',  type: 'TOOLTIP'  },  {  code: 'MESSAGE_2',  text: 'Again, basic tooltip text',  type: 'TOOLTIP'  }, ];  let str = 'A really ironic artisan [message type="TOOLTIP" code="MESSAGE_1"]whatever keytar[/message], scenester farm-to-table banksy Austin twitter handle freegan cred raw denim [message type="TOOLTIP" code="MESSAGE_2"]single-origin[/message] coffee viral.'  let updateStr = str.replace(/([message[^]]*])(. ?)([/message])/g, 'lt;span class="tooltip" title=""gt;$2lt;/spangt;');

Ожидаемый результат:

 A really ironic artisan lt;span class="tooltip" title="Basic tooltip text"gt;whatever keytarlt;/spangt;, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim lt;span class="tooltip" title="Again, basic tooltip text"gt;single-originlt;/spangt; coffee viral.

Комментарии:

1. Да, это выход.

Ответ №1:

Вы можете использовать

 let obj = [  {  code: 'MESSAGE_1',  text: 'Basic tooltip text',  type: 'TOOLTIP'  },  {  code: 'MESSAGE_2',  text: 'Again, basic tooltip text',  type: 'TOOLTIP'  }, ];  let str = 'A really ironic artisan [message type="TOOLTIP" code="MESSAGE_1"]whatever keytar[/message], scenester farm-to-table banksy Austin twitter handle freegan cred raw denim [message type="TOOLTIP" code="MESSAGE_2"]single-origin[/message] coffee viral.'  let updateStr = str.replace(/[message[^]]*scode="([^"]*)"[^]]*]([wW]*?)[/message]/g, (_,code,text) =gt; `lt;span class="tooltip" title="${obj.find(x=gt; x.code == code).text}"gt;${text}lt;/spangt;`); console.log(updateStr);

Регулярное [message[^]]*scode="([^"]*)"[^]]*]([wW]*?)[/message] выражение соответствует

  • [message — [message текст
  • [^]]* — ноль или более символов, отличных от ]
  • scode=" — один пробел и code=" текст
  • ([^"]*) — Группа 1 ( code в замене): любые нулевые или более символов, кроме "
  • "[^]]*] — " , любые нулевые или более символов, отличные ] от, а затем ] символ
  • ([wW]*?) — Группа 2 ( text переменная в замене): любые нулевые или более символов, как можно меньше
  • [/message] — [/message] веревочка.
Метки: