Is it possible, without using external libraries, to parse a string with hashtag then style it with the Text ponent?
const string = "Let's #Tweet on #Twitter";
// Expect:
// Let's <Text style={{ color: 'blue' }}>#Tweet</Text> on <Text style={{ color: 'blue' }}>#Twitter</Text>
I thought this would do:
import React from 'react';
import { Text } from 'react-native';
export const HASHTAG_FORMATTER = string => {
return string.replace(/(^|\s)(#[a-z\d-]+)/ig, `$1${<Text style={{ color: 'blue' }}>$2</Text>}`);
}
Usage:
import React from 'react';
import { View, Text } from 'react-native';
import { HASHTAG_FORMATTER } from '../../utilities/hashtag';
const Home = props => {
return (
<View>
<Text>{HASHTAG_FORMATTER("Let's #Tweet on #Twitter")}</Text>
<View>
)
}
What I got instead was:
Let's [object Object] on [object Object]
See example:
Is there a way to achieve this in jsx? Thanks.
Is it possible, without using external libraries, to parse a string with hashtag then style it with the Text ponent?
const string = "Let's #Tweet on #Twitter";
// Expect:
// Let's <Text style={{ color: 'blue' }}>#Tweet</Text> on <Text style={{ color: 'blue' }}>#Twitter</Text>
I thought this would do:
import React from 'react';
import { Text } from 'react-native';
export const HASHTAG_FORMATTER = string => {
return string.replace(/(^|\s)(#[a-z\d-]+)/ig, `$1${<Text style={{ color: 'blue' }}>$2</Text>}`);
}
Usage:
import React from 'react';
import { View, Text } from 'react-native';
import { HASHTAG_FORMATTER } from '../../utilities/hashtag';
const Home = props => {
return (
<View>
<Text>{HASHTAG_FORMATTER("Let's #Tweet on #Twitter")}</Text>
<View>
)
}
What I got instead was:
Let's [object Object] on [object Object]
See example: https://codesandbox.io/s/react-native-69dwm?fontsize=14
Is there a way to achieve this in jsx? Thanks.
Share Improve this question edited Oct 15, 2019 at 5:00 Sylar asked Oct 15, 2019 at 4:35 SylarSylar 12.1k27 gold badges104 silver badges180 bronze badges2 Answers
Reset to default 10You can't use back references like this, you can use callback function of replace when you want to have a dynamic evaluation
const HASHTAG_FORMATTER = string => {
return string.replace(/(^|\s)(#[a-z\d-]+)/ig, (m, g1, g2) => {
return g1 + "<span style={color:'green'}>" + g2 + "< /span>"
});
}
console.log(HASHTAG_FORMATTER("#tweet"))To solve your specific problem you need to solve it by splitting string and then building Text ponents as per the values
Demo
const HASHTAG_FORMATTER = string => {
return string.split(/((?:^|\s)(?:#[a-z\d-]+))/gi).filter(Boolean).map((v,i)=>{
if(v.includes('#')){
return <Text key={i} style={{color:'green'}}>{v}</Text>
} else{
return <Text key={i}>{v}</Text>
}
})
};
Now you can handle @Mention and #hashtag handle Code snippet
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const HASHTAG_FORMATTER = string => {
return string.split(/((?:^|\s)(?:#[a-z\d-] || @[a-z\d-]+))/gi).filter(Boolean).map((v,i)=>{
if(v.includes('#') || v.includes('@')){
return <Text key={i} onPress={()=>{alert(v)}} style={{color:'green'}}>{v}</Text>
} else{
return <Text key={i}>{v}</Text>
}
})
};
const App =()=> {
return (
<View style={styles.app}>
<Text>{HASHTAG_FORMATTER("Let's #Tweet on #Twitter by @pakistan")}</Text>
</View>
);
}
const styles = StyleSheet.create({
app: {
marginTop: 100,
maxWidth: 500
}
});
export default App;