admin管理员组文章数量:1323586
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;
本文标签: javascriptCreating a simple hashtag formatter in React NativeStack Overflow
版权声明:本文标题:javascript - Creating a simple hashtag formatter in React Native - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742110581a2421235.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论