react-linkify（repo）

Question

在字符串中替换url并将它们作为React的链接呈现的正确方法是什么？

说我有一个字符串：'hello http://google.com world'，我希望它呈现为：hello <a href="http://google.com">http://google.com</a> world

Answer 1

好的，我就是这样做的。

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>
    )
  }
}

Answer 2

试试这个库，它确实你需要： https://www.npmjs.com/package/react-process-string

来自那里的一个例子：

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>
);

这将取代所有链接，无论有没有＆＃34; http：//＆＃34;协议。如果您只想用协议替换链接，请从配置数组中删除第二个对象。

Answer 3

有NPM模块可以处理此问题。这两个都取决于linkify-it（repo）

react-linkify（repo）

<Linkify>
  <div>react-linkify <span>(tasti.github.io/react-linkify/)</span></div>
    <div>React component to parse links (urls, emails, etc.) in text into clickable links</div>
  See examples at tasti.github.io/react-linkify/.
    <footer>Contact: tasti@zakarie.com</footer>
</Linkify>

在撰写本文时，当前版本为1.0.0-alpha。它需要React 16。repo有14个开放票证和17个开放PR。所以那太神奇了。

0.2.2版允许使用更早的版本，但没有链接文字修饰等。

react-native-hyperlink（repo）

如果您使用本机（即电话应用程序），则看起来这两个选项中的更好者。代码示例：

<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>

参考文献

Answer 4

首先将<a>标记添加到字符串：

function httpHtml(content) {
  const reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
  return content.replace(reg, "<a href='$1$2'>$1$2</a>");
}

console.log(httpHtml('hello http://google.com world'))
// => hello <a href="http://google.com">http://google.com</a> world

然后在反应中将字符串渲染为html：

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

Answer 5

我在这里遇到的每一个答案都遇到了问题，所以我不得不自己写：

// 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 + " "
    );

Answer 6

根据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>
}

Answer 7

我写了一个简短的函数来做到这一点：

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;
}

React：替换文字

7 个答案:

react-linkify（repo）

react-native-hyperlink（repo）

参考文献