[英]Underline specific words of a string in React
所以我有一个字符串被发送到 class 被 \n 分割的格式。 我想知道是否可以在字符串的特定单词下划线以使其看起来更好?
目前这是正在通过的
"Name : Jackson
\nLabel: Movie
\nDirector:
\nGenre: Action
\nActors: Will, Jack, Carrie
\nMetascore: 90/100
\nRevenue: 87.5M
\nRuntime: 100 min
\nRating: 9/10"
我希望在 \n 之后的单词直到 ":" 加下划线,但我所看到的只是将整个字符串加下划线。
以下是我当前解析字符串的方式。
const newText = text.split('\n').map(str => <p>{str}</p>);
我的猜测是让 str 再次拆分:在.map 内部并使用<Text style={styles.bold}> </Text>
进行设置?
您可以通过:
分割文本的每一行,如下所示:
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>
代表 html 中的下划线。
您还可以将className
属性添加到围绕label
部分的标记并使用text-decoration: underline;
尝试text.split(/[\n:]/)
。
之后 - 将每个不均匀的元素放入标签中。
当然,只有在文本中没有其他冒号或换行时它才会起作用。
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(''))
拆分 map function 内的字符串,将其包裹在 span 标签中并使用text-decoration: underline;
对于 css。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.