Реагировать: заменить ссылки в тексте

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