Javascript 反应：替换文本中的链接

替换字符串中的URL并使用React将其呈现为链接的正确方法是什么

---

假设我有一个字符串：

'hellohttp://google.com “世界”

，我希望它呈现为：

helloworld

好的，我就是这样做的

class A extends React.Component {
  renderText() {
    let parts = this.props.text.split(re) // re is a matching regular expression
    for (let i = 1; i < parts.length; i += 2) {
      parts[i] = <a key={'link' + i} href={parts[i]}>{parts[i]}</a>
    }
    return parts
  }
  render() {
    let text = this.renderText()
    return (
      <div className="some_text_class">{text}</div>
    )
  }
}

A类扩展了React.Component{
renderText（）{
让parts=this.props.text.split（re）//re是匹配的正则表达式
对于（设i=1；i

试试这个库，它正是您需要的：

例如：

const processString = require('react-process-string');

let config = [{
    regex: /(http|https):\/\/(\S+)\.([a-z]{2,}?)(.*?)( |\,|$|\.)/gim,
    fn: (key, result) => <span key={key}>
                             <a target="_blank" href={`${result[1]}://${result[2]}.${result[3]}${result[4]}`}>{result[2]}.{result[3]}{result[4]}</a>{result[5]}
                         </span>
}, {
    regex: /(\S+)\.([a-z]{2,}?)(.*?)( |\,|$|\.)/gim,
    fn: (key, result) => <span key={key}>
                             <a target="_blank" href={`http://${result[1]}.${result[2]}${result[3]}`}>{result[1]}.{result[2]}{result[3]}</a>{result[4]}
                         </span>
}];

let stringWithLinks = "Watch this on youtube.com";
let processed = processString(config)(stringWithLinks);

return (
    <div>Hello world! {processed}</div>
);

constprocessstring=require（'react-process-string'）；
让配置=[{
正则表达式：/（http | https）：\/\/（\S+）\（[a-z]{2，}？（.*）（|\，|$）/gim，
fn：（键，结果）=>
{结果[5]}
}, {
正则表达式：/（\S+）\（[a-z]{2，}？（.*）（|\，|$|\）/gim，
fn：（键，结果）=>
{结果[4]}
}];
让stringWithLinks=“在youtube.com上观看”；
let processed=processString（config）（stringWithLinks）；
返回(
你好，世界！{已处理}
);

---

将使用或不使用“http://”协议替换所有链接。如果您只想用协议替换链接，请从配置数组中删除第二个对象。

根据OP自己的答案，我想出了一个简单的答案：

{text
  .split(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi)
  .map((part, index) => index % 2 === 0 ? part : <a href={part} target="_blank">{part}</a>
}

{text
.split（/[-a-zA-Z0-9@:%\+.~#？&/=]{2256}.[a-z]{2,4}\b（\/[-a-zA-Z0-9@:%\+.~#？&/=]*）/gi）
.map（（部分，索引）=>索引%2==0？部分：
}

首先添加

”；
}
log（httpHtml（'hellohttp://google.com 世界)()
//=>你好，世界

然后在react中将字符串呈现为html：

function MyComponent() {
  return <div dangerouslySetInnerHTML={{
    __html: httpHtml('hello http://google.com world')
  }} />;
}

函数MyComponent（）{
返回；
}

有NPM模块来处理此问题。这两个模块都依赖于（）

()

react-linkify（tasti.github.io/react-linkify/）
React组件将文本中的链接（URL、电子邮件等）解析为可单击的链接
参见tasti.github.io/react linkify/上的示例。
联系人：tasti@zakarie.com

在撰写本文时，当前版本是1.0.0-alpha。它需要React 16。有14个开放的票证和17个开放的PRs。所以这并不美妙

版本0.2.2允许更早的版本，但没有链接文本装饰等

( ) 如果您使用的是本机（即手机应用程序），则它看起来是两个选项中较好的一个。代码示例：

<Hyperlink linkDefault={ true }>
  <Text style={ { fontSize: 15 } }>
    This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
  </Text>
</Hyperlink>

<Hyperlink onLongPress={ (url, text) => alert(url + ", " + text) }>
  <Text style={ { fontSize: 15 } }>
    This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable for long click.
  </Text>
</Hyperlink>

<Hyperlink
  linkDefault
  injectViewProps={ url => ({
        testID: url === 'http://link.com' ? 'id1' : 'id2' ,
        style: url === 'https://link.com' ? { color: 'red' } : { color: 'blue' },
        //any other props you wish to pass to the component
  }) }
>
  <Text>You can pass props to clickable components matched by url.
    <Text>This url looks red https://link.com
  </Text> and this url looks blue https://link2.com </Text>
</Hyperlink>

此文本将被解析以检查可单击的字符串，如https://github.com/obipawan/hyperlink 并使其可点击。
警报（url+，“+文本）}>
此文本将被解析以检查可单击的字符串，如https://github.com/obipawan/hyperlink 并使长时间点击成为可点击的。
({
testID:url=='http://link.com“？”id1:“id2”，
样式：url=='https://link.com“？{color:'red'}:{color:'blue'}，
//您希望传递给组件的任何其他道具
}) }
>
您可以将道具传递给按url匹配的可单击组件。
此url看起来是红色的https://link.com
这个url看起来是蓝色的https://link2.com 

工具书类

---

我在这里遇到了每个答案的问题，所以我必须写自己的：

// use whatever you want here
const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;

const renderText = txt =>
  txt
    .split(" ")
    .map(part =>
      URL_REGEX.test(part) ? <a href={part}>{part} </a> : part + " "
    );

//在这里可以随意使用
const URL_REGEX=/https？：\/\/（www\.）？[-a-zA-Z0-9:%.\+~\=]{1256}.[a-zA-Z0-9（）]{1,6}\b（[-a-zA-Z0-9（）@:%.\+.~+&/=]）/；
const renderText=txt=>
文本
.拆分（“”）
.map（部分=>
URL_REGEX.test（部分）？：部分+“”
);

我编写了一个简短的函数来实现这一点：

const RE_URL = /\w+:\/\/\S+/g;

function linkify(str) {
  let match;
  const results = [];
  let lastIndex = 0;
  while (match = RE_URL.exec(str)) {
    const link = match[0];
    if (lastIndex !== match.index) {
      const text = str.substring(lastIndex, match.index);
      results.push(
        <span key={results.length}>{text}</span>,
      );
    }
    results.push(
      <a key={results.length} href={link} target="_blank">{link}</a>
    );
    lastIndex = match.index + link.length;
  }
  if (results.length === 0) {
    return str;
  }
  if (lastIndex !== str.length) {
    results.push(
      <span key={results.length}>{str.substring(lastIndex)}</span>,
    );
  }
  return results;
}

const RE\u URL=/\w+：\/\/\S+/g；
函数链接（str）{
让我们比赛；
常量结果=[]；
设lastIndex=0；
while（match=RE_URL.exec（str））{
常量链接=匹配[0]；
if（lastIndex！==match.index）{
const text=str.substring（lastIndex，match.index）；
结果：推(
{text}，
);
}
结果：推(
);
lastIndex=match.index+link.length；
}
如果（results.length==0）{
返回str；
}
if（lastIndex！==str.length）{
结果：推(
{str.substring（lastIndex）}，
);
}
返回结果；
}

与使用JavaScript的方式相同？这救了我一命，所有投票支持@HenrikAndersson评论的谷歌人显然从未使用过React。但这意味着文本也解释html，因此文本“alert（'hello'））“是否也将编译和运行？@einord是的，该函数不过滤

脚本
标记。这会将url转换为可单击的链接，但会用您的服务器（即：localhost）替换https协议和url根目录，因此最终url无效
// use whatever you want here
const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;

const renderText = txt =>
  txt
    .split(" ")
    .map(part =>
      URL_REGEX.test(part) ? <a href={part}>{part} </a> : part + " "
    );

const RE_URL = /\w+:\/\/\S+/g;

function linkify(str) {
  let match;
  const results = [];
  let lastIndex = 0;
  while (match = RE_URL.exec(str)) {
    const link = match[0];
    if (lastIndex !== match.index) {
      const text = str.substring(lastIndex, match.index);
      results.push(
        <span key={results.length}>{text}</span>,
      );
    }
    results.push(
      <a key={results.length} href={link} target="_blank">{link}</a>
    );
    lastIndex = match.index + link.length;
  }
  if (results.length === 0) {
    return str;
  }
  if (lastIndex !== str.length) {
    results.push(
      <span key={results.length}>{str.substring(lastIndex)}</span>,
    );
  }
  return results;
}