5个你不知道的JavaScript字符串处理库(小结)

处理大小写转换,删除字母符号,Unicode处理,URL处理等。

使用字符串可能是一项繁琐的任务,因为有许多不同的用例。例如,将字符串转换为驼峰大小写这样的简单任务可能需要几行代码才能达到最终目标。

function camelize(str) {
 return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
  if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
  return index === 0 ? match.toLowerCase() : match.toUpperCase();
 });
}

上面的代码片段是 StackOverflow 中投票最多的答案。但这也没有解决字符串为 ----Foo----bAr----- 的情况。

这是字符串处理库可以拯救的地方,它们使实现复杂的字符串操作变得容易,并且可以考虑给定问题的所有可能用例。这对你有帮助,因为你只需要调用一个方法即可获得有效的解决方案。

让我们看一些JavaScript的字符串处理库。

1. String.js

string.js,或者简称为 S,是一个轻量级的JavaScript库(压缩后压缩后小于5kb),用于浏览器或提供额外String方法的Node.js。

安装

npm i string

值得注意的方法

between(left, right) ——提取左右串之间的字符串。尝试在HTML中的两个标签之间获取元素时可以使用此方法。

var S = require('string');
S('<a>This is a link</a>').between('<a>', '</a>').s
// 'This is a link'

camelize() ——删除所有下划线或破折号,并将字符串转换成驼峰式大写字母。此功能可用于解决本文开头提到的问题。

var S = require('string');
S('---Foo---bAr---').camelize().s;
//'fooBar'

humanize() ——将输入转换为人性化的形式。这个功能从头开始实现,肯定需要相当多的代码。

var S = require('string');
S('  capitalize dash-CamelCase_underscore trim ').humanize().s
//'Capitalize dash camel case underscore trim'

stripPunctuation() ——去掉给定字符串中的所有标点符号。如果你从头开始实现此功能,则很有可能会错过标点符号。

var S = require('string');
S('My, st[ring] *full* of %punct)').stripPunctuation().s;
//My string full of punct

你可以在此处查看更多方法。

2. Voca

Voca是一个用于处理字符串的JavaScript库。Voca库提供有用的函数来使字符串操作变得轻松自如:更改大小写,修饰,填充,弹化,拉丁化,sprintfy,截断,转义等等。模块化设计允许加载整个库或单个函数以最小化应用程序构建。该库已经过全面测试,有据可查,并得到长期支持。

安装

npm i voca

值得注意的方法

Camel Case(String data)——将数据转换为驼峰格式。

var v = require('voca');
v.camelCase('foo Bar');
// => 'fooBar'

v.camelCase('FooBar');
// => 'fooBar'

v.camelCase('---Foo---bAr---');
// => 'fooBar'

Latinise(String data)——通过删除变音符号来对数据进行拉丁化处理。

var v = require('voca');
v.latinise('cafe\u0301'); // or 'café'
// => 'cafe'

v.latinise('août décembre');
// => 'aout decembre'

v.latinise('как прекрасен этот мир');
// => 'kak prekrasen etot mir'

isAlphaDigit(String data)——检查数据是否仅包含字母和数字字符。 (字母数字)

var v = require('voca');
v.isAlphaDigit('year2020');
// => true

v.isAlphaDigit('1448');
// => true

v.isAlphaDigit('40-20');
// => false

CountWords(String data)——计算数据中的单词数。

var v = require('voca');
v.countWords('gravity can cross dimensions');
// => 4

v.countWords('GravityCanCrossDimensions');
// => 4

v.countWords('Gravity - can cross dimensions!');
// => 4

EscapeRegExp(String data)——转义在数据中的正则表达式特殊字符 -[] / {}()* +? 。 \ ^ $ | 。

var v = require('voca');
v.escapeRegExp('(hours)[minutes]{seconds}');
// => '\(hours\)\[minutes\]\{seconds\}'

你可以在此处查看更多信息。

3. Anchorme.js

这是一个微型快速Javascript库,可帮助检测文本中的链接/ URL /电子邮件,并将其转换为可单击的HTML锚链接。

  • 它的灵敏度高,误报率最低。
  • 它根据完整的IANA列表验证URL和电子邮件。
  • 验证端口号(如果有)。
  • 验证IP八位字节号(如果存在)。
  • 适用于非拉丁字母URL。

安装

npm i anchorme

使用

import anchorme from "anchorme";
// 或者
// var anchorme = require("anchorme").default;
const input = "some text with a link.com";
const resultA = anchorme(input);
//some text with a <a href="http://link.com" rel="external nofollow" >link.com</a>

你可以传入额外的扩展来进一步定制功能。

你可以在此处查看更多信息。

4. Underscore.string

Underscore.string 是JavaScript的字符串操作扩展,可以与或不与Underscore.js一起使用。Underscore.string是一个JavaScript库,用于舒适地处理字符串,它是Prototype.jsRight.jsUnderscore启发的Underscore.js扩展。

Underscore.string为你提供了几个有用的功能:大写、清除、包括、计数、escapeHTML、unescapeHTML、插入,拼接、startsWith、endsWith、标题化、修剪、截断等。

安装

npm install underscore.string

值得注意的方法

numberFormat(number)——格式化数字。将数字格式化为带小数点和顺序分隔的字符串。

var _ = require("underscore.string");
_.numberFormat(1000, 3)
=> "1,000.000"
_.numberFormat(123456789.123, 5, '.', ',');
=> "123,456,789.12300"

chop(string, step)——将给定的字符串切成小块。

var _ = require("underscore.string");
_.chop('whitespace', 3);
=> ['whi','tes','pac','e']

你可以在此处查看更多信息。

5. Stringz

该库的主要亮点是它支持unicode。如果运行以下代码,则输出为2。

"🤔".length
// -> 2

这是因为 String.length() 返回字符串中的代码单元数,而不是字符数。

你可以在此处阅读有关JavaScript unicode问题的更多信息。

安装

npm install stringz

值得注意的方法

limit(string, limit, padString, padPosition)——将字符串限制为给定的宽度。

const stringz = require('stringz');
// Truncate:
stringz.limit('Life's like a box of chocolates.', 20);
// "Life's like a box of"

// Pad:
stringz.limit('Everybody loves emojis!', 26, '💩');
// "Everybody loves emojis!💩💩💩"
stringz.limit('What are you looking at?', 30, '+', 'left');
// "++++++What are you looking at?"

// Unicode Aware:
stringz.limit('🤔🤔🤔', 2);
// "🤔🤔"
stringz.limit('👍🏽👍🏽', 4, '👍🏽');
// "👍🏽👍🏽👍🏽👍🏽"

toArray(string)——将字符串转换为数组。

const stringz = require('stringz');
stringz.toArray('abc');
// ['a','b','c']
//Unicode aware
stringz.toArray('👍🏽🍆🌮');
// ['👍🏽', '🍆', '🌮']

要了解有关Stringz的更多信息,请在此处访问其Github。

来源:blog.bitsrc.io,作者:Mahdhi Rezvi,翻译:前端外文精选

到此这篇关于5个你不知道的JavaScript字符串处理库(小结)的文章就介绍到这了,更多相关JavaScript字符串处理库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript字符串处理(String对象)详解

    定义字符串(String)对象 JavaScript String 对象用于处理文本字符串.创建 String 对象语法如下: 复制代码 代码如下: <script language="JavaScript"> var str_object = new String( str ); var str1 = String( str ); var str2 = str; </script> 以上三种方法中,只有第一种是使用 String 构造函数严格的定义一个字符串对

  • JS字符串处理实例代码

    复制代码 代码如下: link(){var olink = getElementById("link");var text = olink.innerHTML;var start = text.indexOf(">")+1;var end = text.lastIndexOf("<");text = text.substring(start,end);location.href=text;}<a href="java:

  • JavaScript字符串处理常见操作方法小结

    本文实例讲述了JavaScript字符串处理常见操作方法.分享给大家供大家参考,具体如下: 1.字符串合并操作:" + " var iNum01 = 12; var iNum02 = 24; var sNum03 = '12'; var sTr = 'abc'; alert(iNum01+iNum02); //弹出36 alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加 alert(sNum03+sTr); // 弹出12abc 2.pars

  • JavaScript 字符串处理函数使用小结

    1.计算字符串的长度 复制代码 代码如下: var txt="Hello World!" document.write(txt.length) 2.indexOf() 方法 如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置. 复制代码 代码如下: <script type="text/javascript"> var str="Hello world!" //w小写 document.write(str.in

  • Javascript 中文字符串处理额外注意事项

    var strSex="男" ; 在GB2312编码中,假设有另一变量strAxSex是从ActiveX控件中读出的BSTR值,原始值也是"男" ,这时做在javascript程序中做比较:strSex==strAxSex为false,也就是"男"!="男". 但如果从VS2005调试中看表达式 strSex==strAxSex则为true,细看strSex.charCodeAt(0)与strAxSex.charCodeAt(

  • 测试JavaScript字符串处理性能的代码

    复制代码 代码如下: var oldtime = new Date().getTime(); var str = []; for(i=0;i<100000;i++) { str.push('abcabcabcabcabcabcabcabcabcabcabcabc'); } var newtime = new Date().getTime(); var joinTime = (newtime - oldtime); var oldtime = new Date().getTime(); var s

  • js字符串处理之绝妙的代码

    字符串去重 function uniqStr(str) { var str = str.split(''); var zarr = []; for (var i = 0; i < str.length; i++) { if (zarr.indexOf(str[i]) === -1) { zarr.push(str[i]) } } return str.join('') } 将字符放在对象中遍历拼接出字符串 function sc(str) { var obj = { r: "s"

  • js使用ajax传值给后台,后台返回字符串处理方法

    之前使用js获取后台生成的JSON字符串,然后给select填充值,这次需要重新获取一次. 这里的目标是,在一个input输入框里,输入一个用户名,判断是否为空,是否不存在,如果存在返回几个字段给前台,前台再绑定到其他input上 直接垒代码 HTML页面 <code class="language-html"><input type="text" id="iusername" runat="server"

  • JS常用字符串处理方法应用总结

    1.indexOf()方法,从前往后查找字符串位置,大小写敏感,从0开始计数.同理,lastIndexOf() 方法从后往前,两个方法对于相同的检索条件输出的结果是一样的 例如: 复制代码 代码如下: <script type="text/javascript"> var str="Hello World!" document.write(str.indexOf("Hello"))//输出0 document.write(str.in

  • 5个你不知道的JavaScript字符串处理库(小结)

    处理大小写转换,删除字母符号,Unicode处理,URL处理等. 使用字符串可能是一项繁琐的任务,因为有许多不同的用例.例如,将字符串转换为驼峰大小写这样的简单任务可能需要几行代码才能达到最终目标. function camelize(str) { return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) { if (+match === 0) return ""; // or if (/\s+/.test

  • JavaScript 字符串常用操作小结(非常实用)

    字符串截取 1. substring() xString.substring(start,end) substring()是最常用到的字符串截取方法,它可以接收两个参数(参数不能为负值),分别是要截取的开始位置和结束位置,它将返回一个新的字符串,其内容是从start处到end-1处的所有字符.若结束参数(end)省略,则表示从start位置一直截取到最后. let str = 'www.jeffjade.com' console.log(str.substring(0,3)) // www co

  • javascript字符串对象常用api函数小结(连接,替换,分割,转换等)

    本文实例讲述了javascript字符串对象常用api函数.分享给大家供大家参考,具体如下: 1. concat(str1,str2,···) 连接字符串 2. indexOf(str,start) 返回 str 在字符串中首次出现的位置 var str = "hello world"; str.indexOf("hello"); // 0 str.indexOf("o",5); // 7 str.indexOf("World"

  • JavaScript常用本地对象小结

    一.javascript是面向对象的编程语言 封装:把相关的信息(无论数据或方法)存储在对象中的能力 聚集:把一个对象存储在另一个对象内的能力 继承:由另一个类(或多个类)得来类的属性和方法的能力. 多态:编写能以多种形态运行的函数或方法的能力 二.Array对象 使用单独的变量名来存储一系列的值. 2.1创建数组对象 var aValues = new Array(); var aValues = new Array(25); var aColors = new Array("red"

  • 通用javascript脚本函数库 方便开发

    将下面代码保存为Common.js 类库功能: 1.Trim(str)--去除字符串两边的空格 2.XMLEncode(str)--对字符串进行XML编码 3.ShowLabel(str,str)--鼠标提示功能(显示字符,提示字符) 可以设置显示的提示的文字的字体.颜色.大小以及提示的背景颜色.边框等 4.IsEmpty(obj)--验证输入框是否为空 5.IsInt(objStr,sign,zero)--验证是否为整数,正整数,负整数,以及是否包括零 6.IsFloat(objStr,sig

  • 基于Vue 2.0的模块化前端 UI 组件库小结

    AT-UI 是一款基于 Vue.js 2.0 的轻量级.模块化前端 UI 组件库,主要用于快速开发 PC 网站产品. 专门为桌面应用程序构建,AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程,以及一个体面的干净整洁的 UI 组件. 特性 基于 Vue 开发的 UI 组件 基于 npm + webpack + babel 的工作流,支持 ES2015 CSS 样式独立,保证不同的框架实现都能保持统一的 UI 风格( 详见: AT-UI Style) 提供友好的

  • 几款好用的python工具库(小结)

    1.Lux Lux 是一个 Python 库,它可以自动化的进行数据探索,让你能更轻松的玩转数据科学.Lux 旨在与 Pandas 紧密集成,可以按原样使用,而无需修改现有的Pandas代码.要启用Lux,只需将 import lux 与 Pandas import 语句一起添加即可. import lux import pandas as pd 官方链接 https://lux-api.readthedocs.io/en/latest/source/getting_started/instal

  • Javascript面向对象扩展库代码分享

    lang.js库提供了包和类的定义.类的继承与混合(mixin).函数重载等功能,基本可满足大多数面向对象设计的需求.同时支持基于链式的定义方式,让库在使用时更加规范和便捷.下面首先通过简单的例子演示了lang.js的基本功能,之后给出了lang.js的源码及注释. 一.功能介绍 "lang"作为框架的全局定义,其中包括了四个方法: lang.Package(string name) //用于定义包(默认会暴露到全局) lang.Class(string name[, object c

  • 十大热门的JavaScript框架和库

    JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不得不说苦了前端的开发者们.因此本文罗列出了一些优秀的 Javascript 框架和库的特及其在 github 上的 star 数,旨在为各位开发者提供一些参考. 1.ReactJS(Star: 59989,Fork: 10992) 主页:https://facebook.github.io/reac

随机推荐