用 html 按钮替换字符串中的自定义标记答案

【问题标题】：Replace custom markup in string with html button用 html 按钮替换字符串中的自定义标记
【发布时间】：2019-09-21 21:34:26
【问题描述】：

我的字符串/句子中有特殊标记。我需要用相同位置的按钮元素替换字符串中的它们。

我的想法是使用 RegEx 找到它们，然后使用一些 JQuery 来替换它们；但是还没有弄清楚RegEx。所以不确定这是一个 RegEx 解决方案还是它是一个 JQuery 或 RegEx/JQuery 解决方案？我已经尝试过这个正则表达式，但不能隔离每个；如果我可以在我的按钮上使用 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>.

任何有关如何执行此操作的帮助或指示将不胜感激。

【问题讨论】：

标签： javascript jquery regex

【解决方案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);

【讨论】：

快速提问。是否可以在按钮内包含一个跨度标签，例如 person。所以它看起来像这样：
@Rob 是的，你可以，我稍后会更新答案
只是想知道您是否有按钮中的徽章的解决方案？

【解决方案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") : '');
    });

【讨论】：