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

Question

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

Answer 1

它看起来像这样 https://snack.expo.io/@webspaceteam/juicy-cookie

import * as React from 'react';

import {

  Text,

  View,

  StyleSheet,

  TouchableOpacity,

  Linking,

} from 'react-native';

import Constants from 'expo-constants';

// You can import from local files

import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm

import { Card } from 'react-native-paper';

export default function App() {

  const userText =

    'rfrfop referoif frefio remfie https://snack.expo.io/@webspaceteam/ea041b fjir frfrfr';

  const convert = () => {

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

    return userText.split(/\s+/).map((word) => {

      if (urlRegex.test(word)) {

        return (

          <Text onPress={() => Linking.openURL(word)}>

            <Text style={{ color: 'blue' }}>{word}</Text>{' '}

          </Text>

        );

      } else {

        return (

          <>

            <Text>{word}</Text>{' '}

          </>

        );

      }

    });

  };

  return (

    <View style={styles.container}>

      <Text style={styles.paragraph}>{convert()}</Text>

      <Card>

        <AssetExample />

      </Card>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    paddingTop: Constants.statusBarHeight,

    backgroundColor: '#ecf0f1',

    padding: 8,

  },

  paragraph: {},

});

Answer 2

getSelection()在事件侦听器中调用的函数内使用。请参阅代码中的注释信息。

const article = document.getElementById("article");

// event listener that uses mouseup on a handlerFunction

article.addEventListener('mouseup', handlerFunction, false);

// Mouse up event handler function

function handlerFunction(event) {

  // Check if any text was selected using a conditional

  if (window.getSelection().toString().length > 0) {

    // Get selected text and its parent node

    const selection = window.getSelection().toString();

    const selectedEl = window.getSelection().anchorNode.parentNode;

    

    // regex patter for https website {{{MAY NEED WORK THIS JUST FOR EXAMPLE}}} 

    var pattern = new RegExp("^(https?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");

    console.log(selection);

    

    // conditional to check if selection is in fact a https site

    // NOTE THIS CONDITIONAL REGEX WAS NOT TESTED THUROUGHLY

    // I SUGGETS YOU ADD YOUR OWN CONDITIONAL CHECK FOR HTTPS

    if (pattern.test(selection)){

    

      // Add link to selected text

      const addATag = '<li><a href="selection">' + selection + '</a></li>';

    // Append HTML to the selected element

    selectedEl.outerHTML = addATag;

  }

}

}

li {

   list-style-type: none;

}

<div id="article">

  <ul>

    <li>https://myspace.com</li>

    <li>https://www.mywebsite.com</li>

    <li>https://www.rumble.com</li>

  </ul>

</div>