如何使一段文本中的链接充当实际链接？

Question

我有一个应用程序，用户在其中输入可能包含链接的文本（我所说的链接是指只有以 https 开头的链接...）。然后这个输入会变成文本，以便用户可以阅读。不过，我希望本文中的链接作为实际链接使用。我只有一个文本作为字符串，并且希望所有非链接文本都保留为文本。如果你知道制作方法请告诉我

Answer 1

它看起来像这样&nbsp;https://snack.expo.io/@webspaceteam/juicy-cookieimport * as React from 'react';import {&nbsp; Text,&nbsp; View,&nbsp; StyleSheet,&nbsp; TouchableOpacity,&nbsp; Linking,} from 'react-native';import Constants from 'expo-constants';// You can import from local filesimport AssetExample from './components/AssetExample';// or any pure javascript modules available in npmimport { Card } from 'react-native-paper';export default function App() {&nbsp; const userText =&nbsp; &nbsp; 'rfrfop referoif frefio remfie https://snack.expo.io/@webspaceteam/ea041b fjir frfrfr';&nbsp; const convert = () => {&nbsp; &nbsp; const urlRegex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/;&nbsp; &nbsp; return userText.split(/\s+/).map((word) => {&nbsp; &nbsp; &nbsp; if (urlRegex.test(word)) {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text onPress={() => Linking.openURL(word)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={{ color: 'blue' }}>{word}</Text>{' '}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>{word}</Text>{' '}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; };&nbsp; return (&nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; <Text style={styles.paragraph}>{convert()}</Text>&nbsp; &nbsp; &nbsp; <Card>&nbsp; &nbsp; &nbsp; &nbsp; <AssetExample />&nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; </View>&nbsp; );}const styles = StyleSheet.create({&nbsp; container: {&nbsp; &nbsp; flex: 1,&nbsp; &nbsp; justifyContent: 'center',&nbsp; &nbsp; paddingTop: Constants.statusBarHeight,&nbsp; &nbsp; backgroundColor: '#ecf0f1',&nbsp; &nbsp; padding: 8,&nbsp; },&nbsp; paragraph: {},});

Answer 2

getSelection()在事件侦听器中调用的函数内使用。请参阅代码中的注释信息。const article = document.getElementById("article");// event listener that uses mouseup on a handlerFunctionarticle.addEventListener('mouseup', handlerFunction, false);// Mouse up event handler functionfunction handlerFunction(event) {&nbsp; // Check if any text was selected using a conditional&nbsp; if (window.getSelection().toString().length > 0) {&nbsp; &nbsp; // Get selected text and its parent node&nbsp; &nbsp; const selection = window.getSelection().toString();&nbsp; &nbsp; const selectedEl = window.getSelection().anchorNode.parentNode;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // regex patter for https website {{{MAY NEED WORK THIS JUST FOR EXAMPLE}}}&nbsp;&nbsp; &nbsp; var pattern = new RegExp("^(https?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");&nbsp; &nbsp; console.log(selection);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // conditional to check if selection is in fact a https site&nbsp; &nbsp; // NOTE THIS CONDITIONAL REGEX WAS NOT TESTED THUROUGHLY&nbsp; &nbsp; // I SUGGETS YOU ADD YOUR OWN CONDITIONAL CHECK FOR HTTPS&nbsp; &nbsp; if (pattern.test(selection)){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // Add link to selected text&nbsp; &nbsp; &nbsp; const addATag = '<li><a href="selection">' + selection + '</a></li>';&nbsp; &nbsp; // Append HTML to the selected element&nbsp; &nbsp; selectedEl.outerHTML = addATag;&nbsp; }}}li {&nbsp; &nbsp;list-style-type: none;}<div id="article">&nbsp; <ul>&nbsp; &nbsp; <li>https://myspace.com</li>&nbsp; &nbsp; <li>https://www.mywebsite.com</li>&nbsp; &nbsp; <li>https://www.rumble.com</li>&nbsp; </ul></div>