用锚标记替换字符串的多个部分答案

【问题标题】：Replace multiple parts of a string with anchor tag用锚标记替换字符串的多个部分
【发布时间】：2020-02-28 14:01:43
【问题描述】：

我正在尝试用锚标记替换字符串的所有相似部分，如下所示： convert('lorem ipsum google=https://google.com lorem ipsums lorem facebook=https://facebook.com ipsum lorem'); 预期输出：

lorem ipsum <a href="https://google.com">google</a>
lorem ipsums lorem <a href="https://facebook.com">facebook</a> ipsum lorem

【问题讨论】：

标签： javascript regex reactjs

【解决方案1】：

function convert(string){
  console.log(string.replace(/([a-z]*)=((https?|ftp):\/\/(-\.)?([^\s/?\.#-]+\.?)+(\/[^\s]*)?)/ig, "<a href='\$2'>$1</a>"));
}
convert('lorem ipsum google=https://google.com lorem ipsums lorem facebook=https://facebook.com ipsum lorem')

【讨论】：

【解决方案2】：

function convert(str) {
  const parts = str.split(" ");
  const formattedParts = parts.map(value => {
    if (value.includes("=")) {
      const [name, url] = value.split("=");
      return `<a href="${url}">${name}</a>`
    }
    return value;
  });

  return asAnchor.join(" ");
}

这个函数应该读取字符串中的每个“单词”，检查它是否应该是一个锚（如果需要，你可能想将value.includes("=")更新为更高级的正则表达式），然后返回一个格式化的锚字符串根据需要。

由于这是反应，我假设您希望将这些实际呈现为实际链接，而不仅仅是返回格式化字符串，在这种情况下，此组件可能会满足您的需求：

const StringWithLinks = ({ value }) => {
  const parts = value.split(" ");

  return (
    <span>
      {parts.map((part, key) => {
        if (!part.includes("=")) return <span key={idx}>{part}</span>;

        const [name, url] = part.split("=");
        return <a href={url} key={idx}>{name}</a>
      })}
    </span>
  )
}

【讨论】：

【解决方案3】：

let str = 'lorem ipsum google=https://google.com lorem ipsums lorem facebook=https://facebook.com ipsum lorem';

convert(str);

function convert(str) {
    return str.replace(/([a-z]+)=([a-z:\/\.]+)/g, match => { let split = match.split('='); return `<a href="${split[1]}">${split[0]}</a>` })

}

转换函数将首先查找字符串中所有出现的name=url（因为有'g'标签）。

然后它将用锚标记替换每个匹配项，其中href是'='之后的值，文本是'='之前的值。

【讨论】：