在 React 中為字符串的特定單詞加下划線

Question

所以我有一個字符串被發送到 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>進行設置？

Answer 1

您可以通過:分割文本的每一行，如下所示：

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;

Answer 2

嘗試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(''))

Answer 3

拆分 map function 內的字符串，將其包裹在 span 標簽中並使用text-decoration: underline; 對於 css。