TA貢獻(xiàn)1843條經(jīng)驗(yàn) 獲得超7個(gè)贊
它看起來(lái)像這樣 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: {},
});
TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊
getSelection()在事件偵聽(tīng)器中調(diào)用的函數(shù)內(nèi)使用。請(qǐng)參閱代碼中的注釋信息。
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>
舉報(bào)