Найдите URL-адреса и сделайте их интерактивными в reactJs / javascript
Я задаю много вопросов о переполнении стека, но ни один из них не работает.
find URLs and on click open in new tab
скажем, у меня есть эта строка: это URL-адрес Google, нажмите на него: www.google.com. На веб-сайте вместо того, чтобы показывать эту строку напрямую, я хочу найти URL-адрес из строки и увидеть его как интерактивный 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>
Но мне нужен окончательный результат таким образом:
это URL-адрес 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/");
но вывод такой же. Затем попытался связать пакет reactJs это, но он возвращал объект и вылетал из приложения.
** связать реализацию **
import Linkify from 'react-linkify';
<Linkify>this is google url click on it : https://www.google.com/ </Linkify>
его вывод - это большой объект с такими ключами, как реквизит, ключи и т. д.
@dfsq Я пытался использовать linkify, но это возвращаемый объект. Если вы можете привести пример, это будет полезно.
вам нужно опубликовать пример своего кода, тогда это легко исправить
@dfsq добавить код при реализации ссылки
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Следующий код работал у меня
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>введите описание изображения здесь
вы не понимаете суть проблемы. Я этого не ищу.
Скриншот полученного мной результата размещен вместе с кодом. Посмотрите и дайте мне знать, была ли это ваша проблема
Я не могу использовать этот код, потому что моя строка поступает из серверных API, и я не знаю, имеет ли строка URL или нет, поэтому как я могу использовать этот код. вы новичок на сайте, поэтому я не собираюсь отказываться от вас.
строка содержит URL-адрес, адрес электронной почты, номер телефона и все, что мне нужно, отличная логика, и этот код явно не работает в моем случае.
Вы никогда не упоминали в своем вопросе, что ваш URL-адрес получен из внутреннего кода. Вот почему я дал вам прямой ответ. Извините за неправильный ответ, это произошло потому, что я не понял из вашего вопроса, что вы искали. Извинения с моей стороны.
нашел решение используя связать.
import Linkify from 'react-linkify';
<Linkify properties = {{ target: '_blank', style: { color: 'blue' } }}>{message}/Linkify>
Вы можете использовать реагировать-якорь:
import React from 'react'
import { Anchorme } from 'react-anchorme'
const SomeComponent = () => {
return (
<Anchorme>Lorem ipsum http://example.loc dolor sit amet</Anchorme>
)
}
Используйте Linkify-response, чтобы сделать ссылки интерактивными. Используйте приведенный ниже синтаксис для настройки ссылок в вашем формате.
const componentDecorator = (href, text, key) => (
<a className = "linkify__text" href = {href} key = {key} target = "_blank">
{text}
</a>
);
<Linkify componentDecorator = {componentDecorator}>
....
</Linkify>
}
как вы используете
linkify?