首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Javascript中缩短大字符串而不裁剪单词并保存到数组中

在Javascript中,可以使用以下方法来缩短大字符串而不裁剪单词并保存到数组中:

  1. 使用正则表达式和split()方法:可以使用正则表达式将字符串按照空格分割成单词数组,然后根据指定的长度将单词拼接成新的字符串。代码示例如下:
代码语言:txt
复制
function shortenString(str, maxLength) {
  if (str.length <= maxLength) {
    return [str];
  }
  
  const words = str.split(/\s+/); // 使用正则表达式按照空格分割字符串
  let shortenedString = '';
  let currentLength = 0;
  const result = [];
  
  for (let i = 0; i < words.length; i++) {
    if (currentLength + words[i].length <= maxLength) {
      shortenedString += words[i] + ' ';
      currentLength += words[i].length + 1;
    } else {
      result.push(shortenedString.trim());
      shortenedString = words[i] + ' ';
      currentLength = words[i].length + 1;
    }
  }
  
  result.push(shortenedString.trim());
  return result;
}

const longString = "This is a long string that needs to be shortened without cutting words and saved into an array.";
const maxLength = 20;
const shortenedArray = shortenString(longString, maxLength);
console.log(shortenedArray);

上述代码中,我们首先将字符串按照空格分割成单词数组。然后,我们使用一个循环来遍历单词数组,将单词逐个拼接成新的字符串,并根据指定的最大长度进行判断。如果当前拼接的字符串长度不超过最大长度,则继续拼接;否则,将当前拼接的字符串保存到结果数组中,并重新开始拼接新的字符串。最后,将最后一个拼接的字符串也保存到结果数组中。最终,返回结果数组。

  1. 使用递归方法:可以使用递归方法来逐步缩短字符串,直到满足指定的长度要求。代码示例如下:
代码语言:txt
复制
function shortenString(str, maxLength) {
  if (str.length <= maxLength) {
    return [str];
  }
  
  let shortenedString = str.substring(0, maxLength);
  let lastSpaceIndex = shortenedString.lastIndexOf(' ');
  
  if (lastSpaceIndex !== -1) {
    shortenedString = shortenedString.substring(0, lastSpaceIndex);
  }
  
  const remainingString = str.substring(shortenedString.length).trim();
  const result = [shortenedString];
  
  return result.concat(shortenString(remainingString, maxLength));
}

const longString = "This is a long string that needs to be shortened without cutting words and saved into an array.";
const maxLength = 20;
const shortenedArray = shortenString(longString, maxLength);
console.log(shortenedArray);

上述代码中,我们首先判断字符串的长度是否小于等于最大长度,如果是,则直接返回包含原字符串的数组。否则,我们使用substring()方法将字符串截取到指定的最大长度,并找到最后一个空格的位置。如果找到了空格,则将截取的字符串重新赋值为截取到空格之前的部分。然后,我们将剩余的字符串继续进行递归调用,直到满足长度要求。最后,将所有截取的字符串保存到结果数组中,并返回结果数组。

这两种方法都可以在Javascript中缩短大字符串而不裁剪单词并保存到数组中。具体使用哪种方法取决于实际需求和性能要求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

面试100题及答案_三特点带你认识基层岗位常见面试题

答案:1,2,3;数组的操作方法join是用来将数组中所有元素都转化为字符串连接在一起,返回最后生成的字符串的。指定分隔符,默认的是逗号分隔。所以是:1,2,3。...第66期:JavaScript数组,实现向数组末尾添加一个元素的方法是: ? 答案:push( );此方法可向数组的末尾添加一个或多个元素,返回新的长度。...第67期:JavaScript数组,实现对数组的元素进行排序的方法是: ? 答案:sort( );方法,注意,数组数组上进行排序,生成副本。...第94期:javascript全局函数,解析一个字符串返回一个整数的方法是: ? 答案:parseInt(); parseInt() 函数可解析一个字符串返回一个整数。...第99期:JavaScript 比较运算符,表示值与类型均不等(恒等于)的运算符是:_____? 答案:!= = 运算符。

1.1K10

JavaScript字符串“三剑客”

JavaScript字符串方法有很多,其中有三个方法与字符串裁剪有关,他们分别是slice()、substring()和substr(),我把他们统称为“三剑客”。...可以看出,当只传入一个参数时,这三个方法的用法和作用都是一致的,都是将“公”字(索引值为2)一直到字符串末尾的字符串裁剪下来返回,并且都不会影响到原字符串。...二、区别 slice()和substring()的第二个参数均表示的是裁剪的结束位置(但不包括该项,这与数组的slice()方法类似),substr()的第二个参数则表示的是裁剪下来字符串长度 当传入的参数为负值时...参数均为正数 很明显,slice()和substring()用法一致,两个参数分别都表示的是起始位置2和结束位置5,包含结束位置5所字符(“:”),substr()第二个参数表示的是要裁剪下来的字符串长度...,实例裁剪3个字符。

59090
  • JavaScript String高阶用法

    JavaScript String高阶用法 获取字符串长度(length属性) JavaScript ,使用字符串的 length 属性可以读取字符串的长度。...示例 下面示例为 String 类型扩展一个原型方法,用来把字符串转换为数组函数中使用 charAt() 方法读取字符串每个字符,然后装入一个数组返回。...var a = s.match(/c/); //返回数组[h] 如果没有找到匹配字符,则返回 null,不是空数组。 当执行全局匹配时,如果匹配模式包含子表达式,则返回子表达式匹配的信息。...如果第一个参数值比第二个参数值,substring() 方法能够执行截取之前先交换两个参数,而对于 slice() 方法来说,则被无视为无效,返回空字符串。... arguments[0] 总是显示每次匹配的单词,arguments[4] 总是显示被操作的字符串

    19720

    前端JS手写代码面试专题(一)

    面试季来临,JavaScript的面试题目也开始频频出现在各位求职者的复习资料中。 1、如何编写一个JavaScript函数来反转给定字符串单词顺序? 这个问题的答案其实非常巧妙简洁。...这一步的目的是把整个字符串拆分成可以单独操作的小块,即单词。 接下来,通过 reverse() 方法,我们将这个数组单词的顺序颠倒。...这样简洁富有创意的解决方案,无疑会在众多求职者让你脱颖而出。 总的来说,这个数组去重的小技巧不仅实用,而且能够帮助你JavaScript面试留下深刻印象。...掌握了这样的技巧,你距离面试成功又近了一步 3、如何合并两个对象,同时覆盖现有属性? JavaScript的日常开发,对象合并是一项基础又常见的任务。...8、如何将包含连字符(-)和下划线(_)的字符串转换为驼峰命名风格呢? JavaScript开发,对字符串的处理是日常任务不可或缺的一部分。

    17110

    JavaScript 入门基础 - 变量 数据类型(二)

    js是一种弱类型的语言,意味着不需要声明变量的类型,程序运行过程,类型会被自动确定 var age = 10;// 数字型 var sayOk = '是的'; // 字符串型 注:代码运行时,变量的数据类型是由...console.log(isNaN(555)); // false 2.2.3 字符串型 String 字符串引号嵌套 字符串型数据是用来表示文本数据的,有字母、数字、汉字或其他特殊字符构成,使用过程必须用单引号或双引号括起来...利用了算术运算 - * / 隐式转换 console.log('12' - 0); console.log('134' - '123'); 注:parseInt 和 parseFloat单词的大小写,隐式转换是指我们进行算术运算时...var dog = ['小白','小黑','哈士奇','二哈']; 注意:数组的字面量是方括号[],声明数组赋值称为数组的初始化,数组内元素之间用逗号隔开 2.7.3 数组的索引 数组的索引又称为数组的下标...注意:不要直接给数组名赋值,否则里面的数组元素都会被覆盖 2.7.6 冒泡排序 冒泡排序是一种算法,就是把一系列的数据按照一定的顺序进行排列显示(从小到或者从到小)例如把数组 [4, 3, 2, 1

    3.8K40

    JavaScript初探 三 (学习js数组

    数组元素可以是对象: 由于数组的特点,数组是特殊类型的对象 故此,可以在数组存放不同类型的变量 可以数字、字符串、函数、函数…… 而且,还可以在数组存储另一个数组 数组属性 length...JavaScript只支持数字索引;并不支持命名索引方法 var arr = []; arr[0] = "Huawei"; arr[1] = "China"; arr[2] = "Refueling...JavaScript数组 使用数字索引 JavaScript,对象使用命名索引 对象和数组的不同应用 如果希望元素名为字符串(文本),则使用对象 如果希望元素名数字,则使用数组...原因:后者的数组方法,会自动抹除数组索引,delete则会保留索引导致空洞 拼接数组 splice() splice():用于向数组添加新项 var arr = ["Huawei","China...} 注释: 项目值 项目索引 数组本身 Array.reduce() reduce():每个数组元素上运行函数,生成单个值;方法在数组从左到右运行;不会改变原始的数组

    1.7K30

    每日两题 T8

    单词的压缩编码[1] 描述 给定一个单词列表,我们将这个列表编码成一个索引字符串 S 与一个索引列表 A。...对于每一个索引,我们可以通过从字符串 S 索引的位置开始读取字符串,直到 "#" 结束,来恢复我们之前的单词列表。 那么成功对给定单词列表进行编码的最小字符串长度是多少呢?...分析 方法一:遍历后缀,hash检索 我们将数据存放在一个容器,然后逐个拿出,检测拿出的字符串是否存在后缀原容器,如果存在,则删除,不存在则继续查看更小后缀,直至对比完该字符串,转而从容器拿出下一个元素...,直至所有元素均检测完,处理返回结果。...我们把所有字符串先反转,然后存到字典树,查找时,我们只用统计根节点到叶子节点的节点个数+1的总和,即可知道字符串压缩后的长度 代码 方法一:遍历后缀,hash检索 /** * @param {string

    47120

    分享 13 个有用的 JavaScript 片段,提升你的工作效率

    JavaScript 是您可以学习的最流行的语言之一。当我开始学习 JavaScript 时,我总是 StackOverflow、medium 和其他博客上寻找代码片段。...在这篇文章,我将分享我发现它们有用的 15 个 JavaScript 代码片段。 1. 循环地重复字符串 此 JS 片段将展示如何在不使用任何循环的情况下重复字符串。...数组的区别 另一个很棒的片段可以让你在数组脱颖而出。当您处理长数组想了解该数组的相似点或不同点时,这会派上用场。下面的示例代码将加深您的理解,您可以您的 JS 项目中自由使用该代码。...--> 5.全部替换 此代码片段将向您展示如何替换字符串单词,而无需迭代每个单词、匹配它放置新单词。下面的代码片段使用了replaceAll(Target Word, New Word)方法。...简而言之,您可以减少数组的维数。您已经看过“展平数组”片段代码,但是深度展平数组又如何呢?当您有一个的有序数组并且正常的展平对其不起作用时,此代码片段非常有用。为此,您需要深度平整。

    18530

    15个工作中会用到的 JS 代码片段

    当我开始学习 JavaScript 时,我总是 StackOverflow、Medium 和其他博客上寻找优秀解决方案来处理实际开发遇到的问题。...本文中,我将分享我发现的15个有用的JavaScript 代码段。 1、循环地重复一个字符串JavaScript 代码段将展示如何在不使用任何循环的情况下重复字符串。...当你处理一个长数组想知道该数组的相似之处或不同之处时,这个会派上用场。 下面的示例代码将帮助你更加清晰理解,你可以在你的JavaScript 项目中自由使用这些代码。...假设你从服务器端获得响应解析该数据,你需要检查它是 JSON 还是字符串。下面的代码片段。...--> 5、全部替换 此代码段将向你展示如何替换字符串单词,而无需迭代每个单词、匹配它放置新单词

    1.4K60

    JSON基础

    2.5 JSON文件 你可能会觉得今后使用 JSON 时,仅能在代码创建它传输到一个仅 可通过开发者工具来查看的不可见的世界。...因此,我可以将“animal/cat”保存到计算机的一个 JSON 文件,比如 C:/animals.json。...JSON 的数据类型包括: 对象 字符串 数字 布尔值 null 数组 3.3 JSON的对象数据类型 JSON 的对象类型非常简单。...JavaScript,undefined与那些声明的名称和值都不存在的对象或变量有关,null则仅与对象或变量的值 有关。null是一个表示“没有值”的值。... JSON,null必须使用小写形式。 3.8 JSON数组类型 现在探讨一下数组数据类型。如果你对数组不熟悉也没关系,我们先来简单介绍一下。想象一个装着一打鸡蛋的容器。

    80210

    分享 12 个重要的 JS 函数,建议每个前端开发人员都要搞清楚

    并且您在这里学到的知识将加快您的开发速度节省您的宝贵时间! 现在,我们就开始吧。 1、缩短控制台日志 您是否厌倦了代码中一遍又一遍地编写 console.log() ?...4、缩短数组 Web 开发人员有一种简单的方法来缩短数组。您需要使用 length 方法传递一个小于实际数组大小的数字。 5、 打乱数组 有时您想随机化数组的值。...9、计算一个函数的性能 如果您想检查一个函数运行了多长时间,您可以您的程序中使用这种方法。 10、从数组删除重复项 我们经常遇到一个包含重复数据的数组使用循环来删除这些重复数据。...此函数可以不使用循环的情况下以简单的方式删除重复项。 11、对条件使用逻辑 AND/OR 您可以使用逻辑 AND/OR,不是使用 if 条件。这可以在用于执行命令的函数中使用。...如果您也有好的 JavaScript 函数可以分享,请随时留言区发表评论并与其他开发人员分享。

    66830

    串联所有单词的子串----滑动窗口篇八

    一旦滑动窗口内发现匹配的子串,就更新区间,另寻解 这里如何判断当前滑动窗口内的所有子串都与words数组完全匹配呢?...第一个单词 HashMap1 ,然后我们把 foo 存到 HashMap2 。...第二个单词 HashMap1 ,然后把 foo 存到 HashMap2 ,因为之前已经存过了,所以更新它的 value 为 2 ,然后继续比较此时 foo 的 value 和 HashMap1...第三个单词 HashMap1 ,然后把 foo 存到 HashMap2 ,因为之前已经存过了,所以更新它的 value 为 3,然后继续比较此时 foo 的 value 和 HashMap1 ...当前区间的bar单词出现了两次,所给的words数组只出现了一次,显然不满足条件,因此我们需要调整滑动区间位置直到当前区间每个元素出现的次数满足条件为止。

    31930

    万字长文带你走进 JavaScript 的世界

    对象方法 方法 描述 concat( ) 连接两个或更多的数组返回结果 join() 把数组的所有元素放入一个字符串。...) 把数组转换为字符串返回结果 toLocaleString( ) 把数组转换为本地数组返回结果 unshift( ) 向数组的开头添加一个或更多元素,返回新的长度 valueOf( ) 返回数组对象的原始值...全局对象是作用域链的头,还意味着顶层 JavaScript 代码声明的所有变量都将成为全局对象的属性。   全局对象只是一个对象,不是类。既没有构造函数,也无法实例化一个新的全局对象。... JavaScript 代码嵌入一个特殊环境时,全局对象通常具有环境特定的属性。...的 JavaClass isFinite() 检查某个值是否为有穷的数 isNaN() 检查某个值是否是数字 Number() 把对象的值转换为数字 parseFloat() 解析一个字符串返回一个浮点数

    1.3K20

    JavaScript 对象所有方法介绍,看这一篇就够了!

    方法 方法 描述 concat() 连接两个或更多的数组返回结果。 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。...pop() 删除返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素,返回新的长度。 reverse() 颠倒数组中元素的顺序。...toString() 把数组转换为字符串返回结果。 toLocaleString() 把数组转换为本地数组返回结果。 unshift() 向数组的开头添加一个或更多元素,返回新的长度。...全局对象是作用域链的头,还意味着顶层 JavaScript 代码声明的所有变量都将成为全局对象的属性。 全局对象只是一个对象,不是类。既没有构造函数,也无法实例化一个新的全局对象。... JavaScript 代码嵌入一个特殊环境时,全局对象通常具有环境特定的属性。

    1.6K20

    最全BAT算法面试100题:阿里、百度、腾讯、京东、美团、今日头条

    10)排序算法工程的应用 第三:章栈、队列、链表、数组和矩阵结构 1)栈结构 2)队列结构 3)链表结构 4)数组结构 5)矩阵结构 6)二分搜索的扩展 第四:二叉树结构 1)二叉树结构 2)二叉树的递归与非递归遍历...二维数组,每行递增,每列递增,任意交换其中的两数,发现恢复。 二维数组,每行递增,每列递增,实现查找。 二维数组,每行递增,每列递增,求第k的数。...) 写一个二叉树的非递归的后续遍历 写一个简单的正则匹配表达式(将文本的123.4匹配出来) 写个动态规划,最长公共子序列 判断一个字符串是否为另外一个字符串旋转之后的字符串 前k的数 单链表的翻转...去除字符串S1的字符使得最终的字符串S2包含’ab’和’c’。...(Code) 合法括号匹配 一个字符串,找出最长的无重复字符的字串 二叉树结点结构中加一个指针域,使其指向层次遍历的下一个结点,特别地,每一层的最后一个结点为空。

    1.3K30

    xresloader-Excel导表工具链的近期变更汇总

    增加 --enable-string-macro 用于让Macro(文本替换),对字符串类型生效。或使用 --disable-string-macro 让Macro(文本替换),对字符串类型生效。...因为Excel保存时会根据当前的数据状态计算公式结果保存在Cache里,所以即便没有公式重算,公式功能也是受支持的,这个实时重算意义也不是特别。...原先只裁剪尾部的时候,我们的实现可以是碰到数据以后填充前面缺失项目来补空数据。 现在我们对单元格碰到空数据,是不能确定我们能不能补空项目的,因为要根据配置和后面是否有数据来判断。...当然我们也可以单独写数据裁剪的规则,根据配置和当前数组元素的位置来决定是走延后的填补,还是直接跳过空数据。...现在可以通过 CallbackScript=javascript脚本路径 的方式对中间数据做二次处理,整个执行流程内置数据和输出的中间插入了脚本支持。

    1.2K10

    你可能需要这14 个实用又简洁的单行 JS 代码

    打乱数组 数组/列表洗牌的一个常见用途是纸牌游戏中,其中牌组的牌必须随机排序。 Fisher-Yates 洗牌是一种著名的洗牌算法。...我们可以 JavaScript 中使用反向 for 循环来反转字符串,如下所示: const reverseString = (str) => { let reversed = ''; for...获取数组的平均值 这是众多问题中的另一个问题,其中涉及循环的解决方案可以使用一种或多种 Array 方法来缩短。...将蛇形字符串转换为驼峰大小写 蛇形字符串,每个单词由下划线 (_) 分隔并以小写字母开头,例如:variable_name、bread_and_eggs 等。...但是,对于驼峰式字符串,第一个单词以小写字母开头,后面的单词均以大写字母开头。 单词之间没有空格或标点符号。 驼峰式字符串的示例有:variableName、breadAndEggs 等。

    1.7K30

    JavaScript的正则表达式

    : ) "符号只用来分组创建引用,如下: \1 不是 引用的 \d 而是 [a-z] console.log(/(?...:\d)([a-z])\1/.test('1a1'));//false 位置字符 字符 描述 ^ 字符串的开头(要单独存在不能放在[ 的后面) $ 字符串的结尾 \b 单词边界([a-zA-Z_0-9]...(查找所有匹配不是匹配到第一个就停止) m 执行多行匹配 console.log(/JAVA/i.test('java'));//true 支持正则的String对象方法 search(): 用于检索字符串中指定的子字符串...,或检索与正则表达式相匹配的子字符串返回第一个与之匹配的子字符串的位置 console.log('JAVA is not javascript'.search(/java/i));//0 注意:search...,参数必须是正则表达式,返回一个由匹配结果组成的数组 match方法如果正则表达式设置修饰符g,则返回的数组字符串中所有匹配的结果 console.log('JAVA is not JAVAscript

    54720

    【Java 进阶篇】JavaScript 正则表达式(RegExp)详解

    ; var isMatch = pattern.test(text); // true exec() 方法:字符串查找匹配的文本,返回一个数组,包含匹配的文本和匹配的索引。...; var result = pattern.exec(text); // result 包含匹配的文本和索引 match() 方法:字符串查找匹配的文本,返回一个数组,包含所有匹配的文本。...JavaScript 的修饰符包括: i 修饰符:执行区分大小写的匹配。 var pattern = /hello/i; var text = "Hello, world!"...可以匹配空字符串或a。 ^:匹配字符串的开头。 $:匹配字符串的结尾。 |:表示逻辑或,用于分隔多个模式。 ():用于捕获分组,可以将匹配的文本保存到变量。...查找和替换:文本查找特定的模式并进行替换。 校验日期格式:检查日期字符串是否符合指定的日期格式。 数据清洗:清洗数据规范字符或格式。

    47430

    JavaScript编码之路 【JavaScript之操作数组字符串方法汇总】

    ,因此返回一个空字符串 indexOf() indexOf()方法用于字符串搜索指定的子字符串返回该子字符串第一次出现的位置。...使用空格将字符串拆分为单词计算单词数量。...统计每个单词的出现次数,生成一个包含单词和频率的对象。 使用正则表达式将字符串拆分为句子,计算句子数量。 查找包含特定单词的句子。 将字符串拆分为字符数组逆序排列字符。...search() search() 方法是 JavaScript 字符串对象的一个方法,它用于字符串查找指定正则表达式的第一个匹配项,返回匹配项的索引值。...replace() replace() 方法是 JavaScript 字符串对象的一个方法,它用于字符串查找指定的模式并用另一个字符串或函数来替换它。

    17410
    领券