正则表达式过滤器返回对象对象而不是元素

Question

我正在使用 React 和外部 API

我从一个外部 api 接收数据，其中包含 url， 即

sampleText = Ethereum’s original token distribution event, managed by the [Ethereum Foundation](https://messari.io/asset/ethereum)

我想将网址转换为链接：

 const turnIntoLink =(text)=>{
    const urlFilter = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
    return text.replace(urlFilter, (url)=>{
      return '<a href="' + url + '">' + url + "</a>";
    })
  }
turnIntoLink(sampleText)

当我使用上面的代码时，它会正确读取网址但返回

... managed by the [Ethereum Foundation](<a href="https://messari.io/asset/ethereum">https://messari.io/asset/ethereum</a>) 

当我将 turnIntoLink 更改为此

 const turnIntoLink =(text)=>{
    const urlFilter = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
    return text.replace(urlFilter, (url)=>{
      return <a href={url}>${url}</a>;
    })
  }

返回

... managed by the [Ethereum Foundation]([object Object])

更新的 CoinDetail.jsx 反映了反向引用的使用

import React from "react";

const CoinDetail = (props) => {
  const { profile } = props.details;
  const turnIntoLink = (text) => {
    const urlFilter = /\[([^\][]*)]\(((?:https?|ftps?|file):\/\/[^()]*)\)/gi;
    return text.replace(urlFilter, '<a href="$2">$1</a>');
  };
  const display = () => {
    return (
      <div>
        <div>
          Launch Details:
          {turnIntoLink(profile.economics.launch.general.launch_details)}
        </div>
      </div>
    );
  };
  return <section>{profile ? display() : "Loading"}</section>;
};

export default CoinDetail;

我怎样才能让它返回一个实际的 a 元素？

更新：

我能够通过在下面的返回中执行此操作来使其工作

   <span
            dangerouslySetInnerHTML={{
              __html: turnIntoLink(
                profile.economics.launch.general.launch_details
              ),
            }}
          ></span>

它有效，但我觉得这有点 hacky，并且有更好的方法来做到这一点。有吗？

Answer 1

在 React 中，您可以将以下代码与React String Replace 一起使用：

return (
 <div>
   {reactStringReplace(content, /\[([^\][]*)]\(((?:https?|ftps?|file):\/\/[^()]*)\)/gi, (match, x, y) => (  <a href={y}>{x}</a>  ))}
 </div>

如果你使用纯 JavaScript，你可以使用

const turnIntoLink = (text) => {
    const urlFilter = /\[([^\][]*)]\(((?:https?|ftps?|file):\/\/[^()]*)\)/gi;
    return text.replace(urlFilter, '<a href="$2">$1</a>');
}

请参阅regex demo。 详情：

• \[ - 一个 [ 字符
• ([^\][]*) - 第 1 组：除 ] 和 [ 之外的任何零个或多个字符
• ]\( - ]( 字符串
• ((?:https?|ftps?|file):\/\/[^()]*) - 第 2 组：http、https、ftp、ftps、file，然后是 :// 子字符串，然后是除 ( 和 ) 之外的任何零个或多个字符
• \) - 一个 ) 字符。

查看 JavaScript 演示：

const turnIntoLink = (text) => {
    const urlFilter = /\[([^\][]*)]\(((?:https?|ftps?|file):\/\/[^()]*)\)/gi;
    return text.replace(urlFilter, '<a href="$2">$1</a>');
}

console.log( turnIntoLink("Ethereum’s original token distribution event, managed by the [Ethereum Foundation](https://messari.io/asset/ethereum)") );