在 reactJs/javascript 中查找 url 并使其可点击答案

【问题标题】：Find urls and make it clickable in reactJs/javascript在 reactJs/javascript 中查找 url 并使其可点击
【发布时间】：2022-02-03 16:27:25
【问题描述】：

我经历了许多堆栈溢出问题，但没有一个有效。

找到网址并点击在新标签页中打开

假设我有这个字符串：这是 google url 点击它：www.google.com。在网站上而不是直接显示此字符串，我想从字符串中查找 url 并将其视为可点击的 url。

像这样：这是谷歌网址点击它：https://www.google.com/

我尝试过的是：

linkify("this is google url click on it : https://www.google.com/");

linkify = inputText => {
var replacedText, replacePattern1, replacePattern2, replacePattern3;

//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

return replacedText;


};

此代码是堆栈溢出问题之一的和平。

这段代码的结果是：

this is google url click on it : <a href="https://www.google.com/" target="_blank"> https://www.google.com/ </a>

但我需要以这种方式进行最终输出：

这是谷歌网址点击它：https://www.google.com/

我尝试了 anchorme.js，但得到了相同的输出。

实现anchorme.js的步骤

import anchorme from 'anchorme';

anchorme("this is google url click on it : https://www.google.com/");

但输出相同。然后尝试链接 reactJs 包 this 但它是返回对象和崩溃应用程序。

**linkify 实现 **

import Linkify from 'react-linkify';

<Linkify>this is google url click on it : https://www.google.com/ </Linkify>

它的输出是带有道具、钥匙等键的大对象。

【问题讨论】：

你如何使用linkify？
@dfsq 我尝试使用 linkify 但它是返回对象。如果你能提供例子，那会很有帮助。
你需要发布你的代码示例，然后很容易修复它
@dfsq 在链接实现上添加代码

标签： javascript reactjs hyperlink

【解决方案1】：

使用 linkify 找到了解决方案。

import Linkify from 'react-linkify';

 <Linkify properties={{ target: '_blank', style: { color: 'blue' } }}>{message}/Linkify>

【讨论】：

properties 属性最近已被删除。但是，此问题还有其他答案显示了从 2021/22 开始设置链接样式的解决方法。

【解决方案2】：

使用 Linkify-react 使链接可点击使用以下语法自定义格式的链接

const componentDecorator = (href, text, key) => (
    <a className="linkify__text" href={href} key={key} target="_blank">
      {text}
    </a>
  );

<Linkify componentDecorator={componentDecorator}>
....
</Linkify>   
}

【讨论】：

【解决方案3】：

以下代码对我有用

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        this is google url click on it :{" "}
        <a href="https://www.google.com/" target="_blank">
          {" "}
          https://www.google.com/
        </a>
      </div>
    );
  }
}

export default App;

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

enter image description here

【讨论】：

你不明白这个问题。我不是在找这个。
我获得的输出的屏幕截图与代码一起发布。看看，让我知道这是否是您的问题
我无法使用此代码，因为我的字符串来自后端 API，而且我不知道字符串是否有 URL，所以我该如何使用此代码。你是新来的，所以我不会给你失望。
字符串包含 URL、电子邮件、电话号码和所有我需要的不同逻辑，而这段代码显然不适用于我的情况。
您从未在问题中提到您的网址来自后端代码。这就是为什么我给你直接的答案。抱歉我的错误答案，这是因为我实际上并没有从你的问题中理解你在寻找什么。向我道歉。

【解决方案4】：

你可以使用react-anchorme:

import React from 'react'
import { Anchorme } from 'react-anchorme'

const SomeComponent = () => {
  return (
    <Anchorme>Lorem ipsum http://example.loc dolor sit amet</Anchorme>
  )
}

【讨论】：

【解决方案5】：

属性不起作用

属性在最新的 linkify 版本中被删除，所以像这样使用它

<Linkify
    componentDecorator={(decoratedHref, decoratedText, key) => (
        <a target="blank" href={decoratedHref} key={key}>
            {decoratedText}
        </a>
    )}
>

请参阅此以获取更多参考 https://github.com/tasti/react-linkify/issues/96#issuecomment-628472955

【讨论】：