So I've got a string being sent to a class that is split by \n for format. I was wondering if it was possible to underline specific words of the string so it looks better?
Currently this is what is being passed
"Name : Jackson
\nLabel: Movie
\nDirector:
\nGenre: Action
\nActors: Will, Jack, Carrie
\nMetascore: 90/100
\nRevenue: 87.5M
\nRuntime: 100 min
\nRating: 9/10"
And I would like for the word after the \n until the ":" to be underlined but all I've seen are making an entire string underlined.
Heres how I'm currently parsing the string.
const newText = text.split('\n').map(str => <p>{str}</p>);
My guess would be to have str split again by: inside the.map and using <Text style={styles.bold}> </Text>
to set it?
You can split each line of your text by :
, like below:
const string = `
Name: Jackson
Label: Movie
Director:
Genre: Action
Actors: Will, Jack, Carrie
Metascore: 90/100
Revenue: 87.5M
Runtime: 100 min
Rating: 9/10
`;
function MyList() {
const strings = string.split('\n').map((str) => {
const [label, value] = str.split(':');
return (
<div>
<u>{label}</u>:<p>{value}</p>
</div>
);
});
return strings;
}
<u>
stands for underline in html.
You can also add a className
attribute to the tag surrounding the label
part and use text-decoration: underline;
Try text.split(/[\n:]/)
.
After that - put each uneven element into a tag.
Of course it will work only if there are no other colons or new lines in text.
const str = "Name: Jackson\nLabel: Movie\nDirector: \nGenre: Action\nActors: Will, Jack, Carrie\nMetascore: 90/100\nRevenue: 87.5M\nRuntime: 100 min\nRating: 9/10" console.log(str.split(/\s?[\n:]\s?/).map((s, i) => i % 2 === 0? ('<u>' + s + '</u>:'): (' ' + s + '\n')).join(''))
Split the string inside the map function, wrap it in span tags and use text-decoration: underline;
for css.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.