Заменить пользовательскую разметку в строке кнопкой HTML

Question

У меня есть строки / предложения, в которых есть специальная разметка.Мне нужно заменить их в строке с элементом кнопки в том же месте.

Я думал о том, чтобы использовать RegEx, чтобы найти их, а затем использовать JQuery для их замены;однако не выяснили RegEx.Поэтому не уверены, является ли это решением RegEx или, возможно, решением JQuery или RegEx / JQuery?Я пробовал этот RegEx, но не могу изолировать каждого;который, если бы я мог, возможно, использовать JavaScript заменить (?) с моей кнопкой, заполняя атрибуты данных материалом из специальной разметки ...

<START.*<END>

Например:

<START:person>Johny<END> went to school and completed a college degree in <START:degree>Engineering<END>.

Должен вернутьследующее ...

<button data-start='person'>Johnny</button> went to school and completed a college degree in <button data-start='industry'>Engineering</button>.

Любая помощь или указатель о том, как это сделать, будет принята с благодарностью.

Answer 1

Вы можете сопоставить все, что находится между <>, разделить его на :, иметь словарь значений для замены и замены слов до и после :

const dict = {
  START: 'button',
  END: '/button',
  degree: 'industry'
}

const str = `<START:person>Johny<END> went to school and completed a college degree in <START:degree>Engineering<END>.`

const result = str.replace(/<(.*?)>/g, match => {
  const [a, b] = match.split(':');
  return a.replace(/\w+/g, k => dict[k]) + 
         (b ? b.replace(/\w+/g, k => " data-start='" + ( dict[k] || k ) + "'") : '');
});

console.log(result);

Answer 2

разобрался с впрыском там span.badge.

    var result = decoded_string.replace(/<(.*?)>/g, match => {
       var [a, b] = match.split(':');
       return a.replace(/\w+/g, k => dict[k]) +   (b ? b.replace(/\w+/g, k => " data-start='" + ( dict[k] || k ) + "'") : '') + 
       (b ? b.replace(/\w+/g, k => "<span class='badge pull-right margin_left'>" + ( dict[k] || k ) + "</span") : '');
    });