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

Question

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

 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://whosebug.com), this is [Google](https://www.google.com/)"
    return (
    <p dangerouslySetInnerHTML={{__html: this.urlify(description)}}></p>
   );}

以上代码的输出显示如下 here

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

Answer 1

如果您想继续使用 dangerouslySetInnerHTML，您可以使用这个 match/replace 来创建一个锚...

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>

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

React JS Detect link from text this is my [web](https://www.google.com/)

html

javascript

hyperlink

reactjs