Question

这里我试图通过比较字符串的长度来从下拉列表中包装选定的值。我正在使用的代码申请第一行。如何通过比较第二行到下一行的字符串长度来应用相同的逻辑。下面是我正在使用的一些示例，如果我的var selectedItemLength = Math.round(((Item.bounds.width) / (state.style.fontSize * (0.512 * scale))) * (pfConstants.LINE_HEIGHT)); //Here selectedItemLength gives 32 if (selectedItemLength < Item.value.length) { Item.value = Item.value.substring(0, selectedItemLength) + "\n" + Item.value.substring(selectedItemLength, Item.value.length); }怎么办。

{{1}}

Answer 1

注意：一个好的CSS规则可能会解决您的问题，不需要JS。查看word-wrap属性。

继续使用代码here's a few solutions。

首先，我建议在不同的功能中隔离您的问题。在您的代码段中，您会遇到一些不同的内容，例如Item.bounds.width和Item.value。最好将这些函数传递给函数以对它们进行操作并将结果传递回对象。因此，当我理解您的问题的核心时，您需要一个类似的函数：

function(str: string,
         chunkLength: number,
         delimiter: string = "\n",
         maxLines: number = 3) { /* code */ }

该功能需要：

将str分成给定大小的块
仅采用行大小允许的块数
将他们与分隔符

您可以在上面的代码段中调用此函数：

Item.value = demoFunction(Item.value,selectedItemLength);

请记住，正如您所说的（以及我编写解决方案时），您忽略了空格。这会将单词或标记分开而不考虑空格。这可能不是所希望的。即，

testFunction("teal mittens", 8) == "teal mit\ntens";

势在必行的解决方案

正如你所提到的，这是一个有状态的循环。

var demoImperative = function(str, chunkLength, delimiter = "\n", maxLines = 3) {
  var chunks = [];
  for (var index = 0; index < str.length && chunks.length < maxLines; index += chunkLength) {
    // NOTE: substr != substring. See https://stackoverflow.com/questions/3745515/what-is-the-difference-between-substr-and-substring
    chunks.push(str.substr(index, chunkLength));
  }
  return chunks.join(delimiter);
}

凌乱，但它有效。 for循环通过索引继续移动直到字符串或行之外。我选择不动态构建字符串，因为这意味着循环必须跟踪当前行号作为另一个变量并且连接（不在末尾添加额外的\ n）是比较棘手的。

RegExp解决方案

这使用a trick I found on SO按长度分割js字符串。

var demoRegExp =  function(str, chunkLength, delimiter = "\n", maxLines = 3) {
  var regExp = new RegExp('.{1,'+chunkLength+'}', 'g');
  return str.match(regExp).slice(0,maxLines).join(delimiter);
}

当然有点简洁，如果有点不清楚。 .match()执行拆分，.slice()只占用适当的行数，.join()将数组带回字符串。

Ramda Solution

这个使用Ramda.JS，这是一个功能库，它使js中的数据转换（你在这里做的事情）变得更加简单。我写这篇文章很有趣。

var demoRamda = function(str, chunkLength, delimiter = "\n", maxLines = 3) {
  return R.pipe(
    R.splitEvery(chunkLength),
    R.take(maxLines),
    R.join(delimiter)
  )(str);
}

清晰简单，但这需要ramda.js库。除非你正在做这个服务器端（不太可能），包括一个巨大的实用程序库，这个动作是矫枉过正，所以我建议不要这个。

使用JavaScript将文本换行到更多行

1 个答案:

势在必行的解决方案

RegExp解决方案

Ramda Solution