用自定义html替换括号之间的键/值字符串的函数

Question

假设我有一个这样的字符串：

Hello World, here are the links to {my Twitter: https://twitter.com/twitter} and to {Google: https://google.com}

我正在尝试编写一个用 html 元素替换 {Title: url} 的函数，以返回：

Hello world, here are the links to <a href="twitter.com/twitter">my Twitter</a> and to <a href="https://google.com>Google</a>

到目前为止我想出的是

function processWithRegex(string) {
  let links = []
  let regex = /[^{\}]+(?=})/g
  let matches = string.match(regex)
  matches.forEach((match) => {
    match = match.split(': ')
    links.push(match)
  })
  links.forEach((link) => {
    html = `<a href='${link[1]}'>${link[0]}</a>`
    console.log(html)
  })
  return string
}

显然，它返回输入字符串，但至少 console.logs 正确的 html 元素。我的大脑正在放弃，我真的很感激一些帮助......提前谢谢！

Answer 1

您可以使用 JavaScript 的 .replace() 函数。由于您想替换每个出现的{txt: link}，您可以创建一个匹配此模式的正则表达式，并将{ 和} 之间的所有内容分组。使用.replace() 方法的回调，您可以.split(': ') 获取文本和链接组件，然后您可以将其作为链接的一部分返回：

function processWithRegex(string) {
  let regex = /\{([^\}]*)\}/g;
  let new_str = string.replace(regex, (_,m) => {
    const [txt, link] = m.split(': ');
    return `<a href="${link}">${txt}</a>`;
  });
  return new_str;
}

const to_parse = "Hello World, here are the links to {my Twitter: https://twitter.com/twitter} and to {Google: https://google.com}";
const parsed = processWithRegex(to_parse);
console.log(parsed);

document.body.innerHTML = parsed;