反應：替換文本中的鏈接

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

，將取代所有的鏈接有或無 「HTTP：//」 協議。如果您只想用協議替換鏈接，請從config數組中刪除第二個對象。

Answer 3

基礎上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 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') 
    }} />; 
}