首页 web前端 js教程 智能弦缩写

智能弦缩写

Feb 24, 2025 am 08:48 AM

Intelligent String Abbreviation

核心要点

  • JavaScript中的abbreviate()函数能够智能地将字符串缩短到指定的最大长度,确保不会在单词中间断开,并去除多余的空格。
  • 该函数接受三个参数:原始输入字符串、最大输出长度和一个可选的后缀,添加到缩写字符串的末尾。如果未定义后缀,则默认为“…”,表示缩写。
  • 此函数可用于需要限制字符串长度的任何场景,例如处理表单输入、创建自定义工具提示、在基于 Web 的电子邮件列表中显示邮件主题或预处理要通过 Ajax 发送的数据。
  • 该函数的有效性在于它能够将输入字符串拆分为单个单词,然后重新组合尽可能多的单词以适应最大长度。它还会预处理输入以去除多余的空格。

本文将介绍一个名为abbreviate()的简洁高效的JavaScript函数,其主要功能正如其名:智能地缩短字符串到指定的长度。它确保不会在单词中间截断,并预处理字符串以去除多余的空格。以下是abbreviate函数的代码:

function abbreviate(str, max, suffix) {
  if ((str = str.replace(/^\s+|\s+$/g, '').replace(/[\r\n]*\s*[\r\n]+/g, ' ').replace(/[ \t]+/g, ' ')).length <= max) {
    return str;
  }

  var
    abbr = '',
    str = str.split(' '),
    suffix = (typeof suffix !== 'undefined' ? suffix : ' ...'),
    max = (max - suffix.length);

  for (var len = str.length, i = 0; i < len; i++) {
    if ((abbr + str[i]).length <= max) {
      abbr += str[i] + ' ';
    } else {
      break;
    }
  }

  return abbr.replace(/[ ]$/g, '') + suffix;
}
登录后复制
登录后复制

该函数接受三个参数:原始输入字符串、最大输出长度和一个可选的后缀,添加到缩写字符串的末尾。如果未定义后缀,则默认为“…”(一个空格后跟三个点),这是一种常见且易于识别的缩写指示方式。

函数用途

此函数可用于需要限制字符串长度的任何场景,作为简单substr表达式的更智能的替代方案。可能的应用有很多,例如处理表单输入、创建自定义工具提示、在基于 Web 的电子邮件列表中显示邮件主题或预处理要通过 Ajax 发送的数据。例如,要将字符串限制为 100 个字符并添加默认后缀,我们可以这样调用它:

str = abbreviate(str, 100);
登录后复制
登录后复制

这在概念上等同于此substr表达式:

str = str.substr(0, 96) + " ...";
登录后复制
登录后复制

但这是一种非常粗略的方法,因为它常常会导致输出字符串在单词中间断开。abbreviate函数专门设计为不会这样做,它会在最后一个单词之前拆分字符串,而不是在单词中间拆分。因此,abbreviate()生成的输出字符串通常会短于指定的最大长度,但绝不会长于它。该函数还考虑了缩写后缀所需的空格,即如果指定的最大长度为 100,但后缀本身为 4 个字符,那么我们最多只能使用 96 个主输入字符串的字符。您可以通过传递空字符串来指定根本没有后缀,或者如果您想缩写标记字符串,则可以将其定义为 HTML 关闭标签。例如,以下输入:

abbreviate("<p>One two three four five</p>", 15, "");
登录后复制
登录后复制

将产生此输出:

function abbreviate(str, max, suffix) {
  if ((str = str.replace(/^\s+|\s+$/g, '').replace(/[\r\n]*\s*[\r\n]+/g, ' ').replace(/[ \t]+/g, ' ')).length <= max) {
    return str;
  }

  var
    abbr = '',
    str = str.split(' '),
    suffix = (typeof suffix !== 'undefined' ? suffix : ' ...'),
    max = (max - suffix.length);

  for (var len = str.length, i = 0; i < len; i++) {
    if ((abbr + str[i]).length <= max) {
      abbr += str[i] + ' ';
    } else {
      break;
    }
  }

  return abbr.replace(/[ ]$/g, '') + suffix;
}
登录后复制
登录后复制

函数工作原理

abbreviate函数的关键在于能够将输入字符串拆分为单个单词,然后重新组合尽可能多的单词以适应最大长度。为了提高效率,我们需要确保单词之间的分隔符是可预测的,最简单的方法是最小化内部空格——将换行符和制表符转换为空格,然后减少连续空格,以便每个内部空格块都变成一个空格。当然,还有其他方法可以处理这个问题——例如,我们可以为分割定义更灵活的正则表达式,该表达式考虑了我们可能在单词之间找到的所有不同类型的字符。甚至还有一个用于正则表达式的单词边界字符(“b”),所以我们也可以使用它。但我发现空格预处理本身很有用,尤其是在处理用户输入时。而按单词边界分割不会产生预期的结果,因为破折号、点、逗号和大多数特殊字符实际上都被视为单词边界。但我认为除非字符后跟空格,否则按标点符号分割单词是不合适的,这样连字符单词和代码片段就不会在中间分割。因此,该函数的第一项工作是进行空格预处理,然后如果结果已经短于指定的最大值,我们可以直接返回它:

str = abbreviate(str, 100);
登录后复制
登录后复制

如果我们不这样做,那么我们可能会遇到字符串在不必缩写时被缩写的情况,例如:

str = str.substr(0, 96) + " ...";
登录后复制
登录后复制

如果没有第一个条件,我们将得到缩写的输出,因为指定的最大值必须考虑后缀的长度:

abbreviate("<p>One two three four five</p>", 15, "");
登录后复制
登录后复制

而添加第一个条件则会产生未修改的输出:

<p>One two>
登录后复制

因此,除非我们在此时返回,否则我们将继续编译缩写字符串——按空格分割输入字符串以创建单个单词,然后迭代地将每个单词-空格对重新组合在一起,只要缩写字符串短于指定的最大长度。一旦我们编译了所需的内容,我们就可以中断迭代,然后从缩写字符串的末尾修剪残留的空格,然后再添加后缀,最后返回结果。从右端修剪残留的空格然后再用默认后缀添加它看起来有点浪费,但这允许输入后缀根本没有空格。

结论

这就是一个简单但智能的字符串缩写函数,它还会预处理输入以去除多余的空格。根据我的经验,这两个要求通常会同时出现,这就是我开发此函数以这种方式工作的原因。

(由于篇幅限制,此处省略了FAQ部分。 如果需要,可以单独提供FAQ部分的伪原创版本。)

以上是智能弦缩写的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

See all articles