首页 > 编程语言 >使用 JavaScript 从字符串中提取数字

使用 JavaScript 从字符串中提取数字

时间:2023-01-29 15:00:22浏览次数:33  
标签:提取 数字 JavaScript let numbers 字符串 方法 string


在 JavaScript 中,有多种方法可以从字符串中提取数字。一种方法是使用 match() 方法和正则表达式来搜索字符串中的所有数字。另一种方法是使用 replace() 方法和正则表达式从字符串中删除所有非数字字符,只留下数字。

让我们借助一些示例来了解每种方法。

使用 match() 方法和正则表达式

正则表达式是一种搜索模式,我们可以通过组合多个字母和特殊字符来创建。我们可以对字符串中的数字使用 '/\d+/' 搜索模式。在“\d+”搜索模式中,d 表示 0 到 9 之间的数字,“+”表示找到至少一个数字。

因此,我们可以使用该正则表达式作为 JavaScript 内置匹配方法的参数来搜索给定字符串中的所有数字。

语法

用户可以按照以下语法从给定字符串中提取所有数字。


let str = "Sampll323435 Stringrfd23232ftesd3454!";
let numbers = str.match('/\d+/');


在上面的语法中,我们使用了 match() 方法,该方法匹配给定字符串中数字的出现次数。

在此示例中,我们创建了包含数字的字符串。之后,我们创建了带有 g 标志的正则表达式来匹配字符串中出现的所有数字,并将其作为 match() 方法的参数传递以在字符串中匹配

match() 方法根据正则表达式匹配返回包含所有数字的数组。



<html> <body> <h3>Using the <i> match () </i> Method and Regular Expression to extract the numbers from the string</h3> <div id = "output"> </div> <script> let output = document.getElementById("output"); // defining the string containing the numbers let str = "Sampll323435 Stringrfd23232ftesd3454!"; output.innerHTML = "Original String: " + str + "<br/>"; // Matching for the numbers using the match() method. let numbers = str.match(/\d+/g); // numbers is an array of all occurrences of numbers // if any single number is available in the string, then print numbers if (numbers.length > 0) { output.innerHTML += "<br> Numbers in the StringL: " + numbers + "<br/>"; } </script> </body> </html>

使用 replace() 方法和正则表达式

我们可以使用正则表达式来识别数字字符和其他字符。因此,我们将使用正则表达式标识其他字符并将其替换为空字符串。通过这种方式,我们可以删除除数字以外的所有字符并从字符串中提取数字。

语法

用户可以按照以下语法使用 replace() 方法从字符串中提取数字。


let result = str.replace(/[^0-9]/g,"");


在上面的语法中,str 是一个引用字符串,我们想从中提取一个数字。此外,正则表达式 [^0-9] 表示不介于 0 和 9 之间的所有字符。

在下面的示例中,我们使用 replace() 方法将所有字符替换为除数字字符之外的空字符串。我们将正则表达式作为第一个参数传递,将空字符串作为第二个参数传递。

replace() 方法在将除数字字符以外的所有字符替换为空字符串后返回字符串。在输出中,我们可以观察到它不像 match() 方法那样返回数组,而是只返回一个字符串。


<html> <body> <h3>Using the <i> replace() </i> method and regular expression to extract the numbers from the string</h3> <div id = "output"> </div> <script> let output = document.getElementById("output"); let string = "dnbdj53454 4k54k6j23in k09e30n9923g9 kjm545"; output.innerHTML = "Original String: " + string + "<br/>"; // replace all non-numeric characters with empty string let result = string.replace(/[^0-9]/g, ""); output.innerHTML +="<br> Numbers in the string: " + result + "<br/>"; </script> </body> </html>

使用 reduce() 方法从字符串中提取数字

reduce() 是 JavaScript 的内置库方法。我们可以将字符串转换为字符数组,并将 reduce() 方法与字符的数组一起使用。reduce() 方法通过对数组元素执行操作来帮助我们将数组减少为单个元素。

在这里,我们将检查字符是否为数字并将其添加到最终元素中;否则,我们将添加一个空字符串。

语法

用户可以按照以下语法使用 reduce() 方法从字符串中提取数字。


let charArray = [...string];
let numbers = charArray.reduce(function (numString, element) {
let nums = "0123456789";
if (nums.includes(element)) {
return numString + element;
}
return numString;
},"");


在上面的语法中,我们将reduce方法与charArray一起使用。我们已将回调函数作为第一个参数传递,将空字符串作为第二个参数传递。

算法

  • 步骤 1 − 使用扩展运算符将字符串转换为字符数组。
  • 步骤 2 - 将 reduce() 方法与 charArray 一起使用,将整个数组简化为仅包含数字的单个字符串。
  • 步骤 3 − 将回调函数作为 reduce() 方法的第一个参数传递,该方法返回缩减的字符串
  • 步骤 4 − 在回调函数中,将 numString 作为第一个参数传递,这是一个简化的字符串,元素作为第二个参数传递,这是一个数组元素,表示字符串的字符。
  • 步骤 5 − 在回调函数中,检查数组的字符是否意味着元素介于 0 和 9 之间。如果是这样,请在 numString 中添加该字符并返回它;否则,按原样返回 numString。
  • 步骤 6 − 作为 reduce() 方法的第二个参数,传递一个空字符串,这是 numString 的初始值。
  • 步骤 7 − 在数组的完整迭代之后,reduce() 方法返回 numString 的最终值。

在下面的示例中,我们获取了一个包含数字的字符串,并实现了上述算法从字符串中提取数字。



<html> <body> <h3>Using the <i>reduce() </i>method to extract the numbers from the string</h3> <div id = "output"> </div> <script> let output = document.getElementById("output"); let string = "34gr345fr45"; output.innerHTML += "Original String: " + string + "<br/>"; let charArray = [...string]; let numbers = charArray.reduce(function (numString, element) { let nums = "0123456789"; if (nums.includes(element)) { return numString + element; } return numString; }, ""); output.innerHTML +="<br> Number in the String: " + numbers + "<br/>"; </script> </body> </html>

在本教程中,我们讨论了从给定字符串中提取数字的三种方法。第一种方法是使用 match() 方法和正则表达式来搜索字符串中的所有数字。第二种方法使用 replace() 方法和正则表达式从字符串中删除所有非数字字符,只留下数字。第三种方法是使用 reduce() 和 include() 方法。仔细考虑哪种方法最适合给定情况非常重要。

标签:提取,数字,JavaScript,let,numbers,字符串,方法,string
From: https://blog.51cto.com/10zhancom/6025781

相关文章

  • 解释 JavaScript 中计时器的工作原理
    在JavaScript中,计时器是一个非常值得注意的功能。与普通的手表计时器一样,我们可以一次启动计时器,并在特定时间后执行JavaScript中的函数或代码。简单来说,我们可以使用计......
  • php代码:判断一个html字符串标签不闭合(没有结束标记)
    来源代码记录一个php的html标签自动闭合的函数代码<?phpfunctionfix_html_tags($input,$single_tags=array()){$result=null;$stack=array();//标......
  • JavaScript 循环
    JavaScript中有三种主要的循环类型:for、while和do...while。for:循环指定次数。例如:for(leti=0;i<5;i++){console.log(i);}while:当条件为真......
  • Python字符串中用于转义的字符很多
    Python字符串中用于转义的字符很多,这里列举了几个比较常用的几个,更多的转义应用会放在合集的文章里。\n换行符:可以在一行内创建多行输出的字符串;\t制表符:相当于四个空格......
  • 【Python视频下载】Python字符串连接的5种方法
    导读在使用Python的时候,经常会进行字符串操作,本文总结了一下Python字符串连接的5种方法,希望对大家有所帮助。1.加号第一种,有编程经验的人,估计都知道很多语言里面是用加号连......
  • c# 提取注释即summary
    1、需要在项目属性中开启生成xml启动项2、添加辅助类XmlCommentHelper///<summary>///注释辅助类///</summary>publicclassXmlCommentHelper......
  • Oracle行转多行 字符串列表转数字
    原格式转换后格式适用于3,4这样逗号分隔的数字组成的字符串类型转换成3和4两行sql:SELECTREGEXP_SUBSTR(guarantee_method,'[^,]+',1,LEVEL)guarantee_method......
  • JavaScript 赋值
    JavaScript中有多种赋值方式。1、基本赋值:使用等号"="进行赋值,例如leta=1。2、多变量赋值:使用逗号","将多个变量赋值成同一个值,例如leta=1,b=2。3、增......
  • Linux系统Shell脚本第二章:条件测试、正整数字符串比较与if、case语句
    目录一、条件测试1、三种测试方法2、正整数值比较3、字符串比较4、逻辑测试二、脚本中常用命令1、echo命令2、date命令3、cal命令4、tr命令5、cut命令6、sort......
  • JavaScript学习笔记—DOM之初识
    document浏览器为我们提供了一个document对象,是一个全局变量代表整个网页...<body><buttonid="btn">点我一下</button><script>//获取btn对象cons......