javascript - 用 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);