React JS 从文本中检测链接这是我的 [web](https://www.google.com/)

Posted 2023-03-25

【中文标题】React JS 从文本中检测链接这是我的 [web](https://www.google.com/)

【英文标题】：React JS Detect link from text this is my [web](https://www.google.com/)

【发布时间】：2022-01-06 22:47:23

【问题描述】：

有没有人建议从文本中检测链接 目前在反应我只是使用下面的代码检查正则表达式的链接：

 urlify(text) 
  var urlRegex = (new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]2,4)(:[0-9]+)?(/.*)?"));
   return text.replace(urlRegex, function (url) 
   return '<a href="' + url + '" target="_blank">' + url + '</a>';
 );

  render() 
   let description="this is my [web](http://***.com), this is [Google](https://www.google.com/)"
    return (
    <p dangerouslySetInnerhtml=__html: this.urlify(description)></p>
   );

上述代码的输出显示为here

但我只想将文本显示为 这是我的web

【问题讨论】：

为什么那个字符串最后多了一个]？这只是一个错字吗？

抱歉，已更新

【参考方案1】：

如果您想继续使用dangerouslySetInnerHTML，您可以使用此匹配/替换来创建锚点...

const text = 'this is my [web](https://www.google.com/)'

const regex = /(.+)\[(.+)\]\((.+)\)/;

const anchor = text.replace(regex, (match, a, b, c) => 
  const text = `$a[0].toUpperCase()$a.substring(1)$b`;
  return `<a href="$c">$text</a>`;
);

console.log(anchor);

...或者您可以创建一个定制组件，将匹配的数组输出映射到某个创建锚点的 JSX。

function MarkdownAnchor( markdown ) 

  const regex = /(.+)\[(.+)\]\((.+)\)/;
  const match = markdown.match(regex);

  function formatText(str) 
    return `$str[0].toUpperCase()$str.substring(1)`
  

  return (
    <a href=match[3]>
      formatText(`$match[1]$match[2]`)
    </a>
  );



const markdown = 'this is my [web](https://www.google.com/)';

ReactDOM.render(
  <MarkdownAnchor markdown=markdown />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>