Question

我遇到了很多堆栈溢出问题，但是没有一个起作用。

找到URL，然后单击“在新标签中打开”

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

像这样：这是Google网址，点击它：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>

但是我需要这种方式的最终输出：

这是Google网址，点击它：https://www.google.com/

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

实现anchorme.js的步骤

import anchorme from 'anchorme';

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

但是输出是相同的。然后尝试使用linkify reactJs软件包this，但它是返回对象和崩溃应用程序。

**链接实现**

import Linkify from 'react-linkify';

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

它的输出是带有道具，键等键的大物体。

Answer 1

以下代码对我有用

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

Answer 2

使用 linkify 找到了解决方案。

import Linkify from 'react-linkify';

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

Answer 3

您可以使用react-anchorme：

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

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

Answer 4

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

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

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

在reactJs / javascript

4 个答案: