时间戳

首页 > 解决方案 > 在反应中显示一个字符串

reactjs - 在反应中显示一个字符串

问题描述

我有一个如下所示的字符串，我想在特定字符限制后截断它并显示一个省略号。

"This is a long string"

在截断时，我希望字符串显示如下内容：

This is a long (...)

or

This is a (...)

or

This is (...)

上面的例子没有删减的话。我不想要的是：

This is a lon (...)

or

This is a long s (...)

上面的例子不起作用。

我正在使用以下函数来截断字符串。该功能的问题在于它有时会截断单词。我使用的长度值是 175。对于 175 个字符的限制，有时它会削减单词，有时它不会。

export const wordsTruncate = (words, length) => {
    const j = words.split('');
    let result = j.filter((z, a) => a <= (length - 1));

    return result.join("");
}

我想知道我需要在上面的函数中进行哪些更改，以便它不会像上面的示例中所示那样删减单词。

标签： reactjsstringsubstring

解决方案

您可以使用动态模式，您可以在其中指定要使用省略号的字符串开头的最小字符数，以及字符数的长度。

^(?!\s)(.{3,10}\S)(?!\S).*

正则表达式演示

  • ^起点线
  • (?!\s)在开始时断言不是空格字符
  • (.{3,10}\S)捕获组 1（m[1]在示例代码中表示为），匹配 3 - 10 次任何字符，然后匹配最后的非空白字符
  • (?!\S)负前瞻，在右边断言一个空白边界
  • .*匹配该行的其余部分

const wordsTruncate = (s, minNrOfChars, length) => {
  if (minNrOfChars > length || minNrOfChars < 1 || length < 1) return s;
  minNrOfChars--;
  length--;
  const regex = new RegExp(`^(?!\\s)(.{${minNrOfChars},${length}\}\\S)(?!\\S).*`);
  const m = s.match(regex);
  return m ? `${m[1]} (...)` : s;
}

const strings = [
  "This is a long string",
  "a b c d e f g h",
  "a b c d e       ",
  "a b",
  "this isatest",
  "thisisatesttesttest",
  "A bcdefghifkkle",
  "a",
  "ab",
  "abc",
  "abcd",
  "abcde"
];

strings.forEach(s => {
  console.log(`"${s}" --> ${wordsTruncate(s, 3, 10)}`);
});

推荐阅读