js 特定索引下拆分字符串并组建成新的字符串数据

news2024/10/6 22:20:02

要在特定索引处拆分字符串,请使用 slice 方法获取字符串的两个部分,例如 str.slice(0, index) 返回字符串的一部分,但不包括提供的索引,而 str.slice(index) 返回字符串的其余部分。

过程:我们创建一个可重用的变量,它将一个字符串和一个索引作为参数。
然后使用 String.slice 方法根据提供的索引拆分字符串;
在这里插入图片描述

function split(str, index) {
  const result = [str.slice(0, index), str.slice(index)];
  return result;
}
const [first, second] = split('abcd', 2);
console.log(first); // 👉️ "ab"
console.log(second); // 👉️ "cd"

如果需要重新组织数据可以进行方法的改造和封装,
方法封装: 在上述方法的基础上 再利用正则改造(我是使用正则表达式找到第一个匹配的数字)具体看你的需求。

在这里插入图片描述

let model = 'ZA10/10/15'
insertAtFirstDigit(model, 'A')
// 可以作为公共方法进行调用
const insertAtFirstDigit = (str:any, contentToInsert:any) => {
  const digitRegex = /\d/;
  let match;
  let index = 0;
  // 使用正则表达式找到第一个匹配的数字
  while ((match = digitRegex.exec(str)) !== null) {
    index = match.index;
    break;
  }
  // 如果没有找到数字,直接返回原字符串
  if (index === -1) {
    return str;
  }
  // 使用 slice 方法插入内容
  return str.slice(0, index) + contentToInsert + str.slice(index);
}

就得到了新的数据,然后去赋值展示就好了。
我的需求在这里
在这里插入图片描述
所以在上述的基础上就要做些处理。

 <p>
  *支架产品型号: {{ newBracketProductModel}}{{remainingChars}}
 </p>

const FeatureCodeList = ref([
  {
    label: 'A类支架(A)',
    value: 'A1',
    sortIndex: 0
  },
  {
    label: '大倾角(Q)',
    value: 'Q',
    sortIndex: 1
  },
  {
    label: '电液控(D)',
    value: 'D',
    sortIndex: 2
  },
  {
    label: '大侧帮支架左架(A)',
    value: 'A',
    sortIndex: 3
  },
  {
    label: '大侧帮支架右架(B)',
    value: 'B',
    sortIndex: 4
  }
])
let newBracketProductModel = ref('')
let remainingChars = ref('')
let flagAStatus = ref(false)
主要的在这,型号的点击事件就没有写,很简单,去获取页面的数据区判断赋值就好了。

// 支架特征代号触发事件
const handleCheckedCitiesChange = (value: string[]) => {
  // 编辑
  if(type.value === 'edit'){
    const newOrderList = FeatureCodeList.value.filter(item => item.value !='A1')?.filter((v) => value.includes(v.label))
    const fruitString = newOrderList?.map(item => {
      return item.value
    }).join()
    remainingChars.value = fruitString.replace(/,/g, '') // 使用全局正则表达式替换所有的逗号为空字符串
    let firstA = 'A类支架(A)'
    flagAStatus.value = value.indexOf(firstA) >= 0
    if(value.length >= 0 && flagAStatus.value === false){
      if(form.value.selectDeviceModel != ''){
        newBracketProductModel.value = form?.value?.deviceModel
      }else{
        newBracketProductModel.value = ''
      }
    }else if(value.length > 0 && flagAStatus.value){
      if(form.value.selectDeviceModel != ''){
        // \d表示任意数字 \D表示任意非数字
        let newStr = form?.value?.deviceModel?.replace(/^(\D+)(\d+)/, '$1A$2');
        newBracketProductModel.value = newStr
      }else{
        newBracketProductModel.value = 'A'
      }
    }
  }else{
    // 新增
    const newOrderList = FeatureCodeList.value.filter(item => item.value !='A1')?.filter((v) => value.includes(v.label))
    const fruitString = newOrderList?.map(item => {
      return item.value
    }).join()
    remainingChars.value = fruitString.replace(/,/g, '') // 使用全局正则表达式替换所有的逗号为空字符串
    let firstA = 'A类支架(A)'
    flagAStatus.value = value.indexOf(firstA) >= 0
    if(value.length >= 0 && flagAStatus){
      if(form.value.selectDeviceModel != ''){
        if (flagAStatus.value) {
          newBracketProductModel.value = insertAtFirstDigit(form.value.supportProductModel, 'A')
        }else{
          newBracketProductModel.value = form.value.supportProductModel
        }
      }else{
        if (flagAStatus.value) {
          newBracketProductModel.value =  'A'
        }else{
          newBracketProductModel.value = ''
        }
      }
    }else{
      newBracketProductModel.value = ''
    }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1611124.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux-用户管理类命令实训

查看根目录下有哪些内容 进入/tmp目录&#xff0c;以自己的学号建一个目录&#xff0c;并进入该目录 像是目前所在的目录 在当前目录下&#xff0c;建立权限为741的目录test1 在目录test1下建立目录test2/test3/test4 进入test2&#xff0c;删除目录test3/test4 &#xff08;7&…

paddle.net怎么付款?paddle.net怎么订阅?

有需要的小伙伴可以使用Fomepay的卡进行订阅支付&#xff0c;我这里使用的是491090卡段&#xff0c;开卡步骤很简单&#xff0c;点击获取卡片 1、注册 2、填写姓名使用拼音或者英文名都可以 3、支付宝或者微信支付

JavaWeb-登录校验

会话技术 浏览器使用的是http协议&#xff0c;多次请求间数据是不能共享的&#xff0c;例如我们要去访问用户数据的接口&#xff0c;但这时候用户是否已经登入了呢&#xff1f;是不知道的&#xff0c;为了解决这个问题&#xff0c;于是引入了会话跟踪技术。 会话&#xff1a;…

一次Ambari安装记录

引言 Ambari是一个开源的Apache项目,它提供了一个直观易用的Web界面,用于管理、监控和配置Apache Hadoop集群。它是一个集群管理工具,可以帮助管理员轻松地部署、管理和监控Hadoop集群的各种组件,如HDFS、YARN、MapReduce、Hive、HBase等。通过Ambari,用户可以在集群中添…

【GPTs分享】GPTs分享之Image Recreate | img2img​

简介 该GPT是一个专门用于图像编辑、重建和合并的工具。它通过详细的自动图像描述和生成&#xff0c;帮助用户从源图像中重现或修改图像。此工具设计用于为视障用户提供图像内容的详细描述&#xff0c;并生成全新的图像&#xff0c;以满足特定的视觉需求。 主要功能 \1. 图像…

存储人视角:人工智能AI + 大模型

原文来自于知乎存储专栏&#xff1a; 存储人视角&#xff1a;人工智能AI 大模型 前沿 我的角色 背景 AI 出场 效果 一个宠娃狂魔 娃喜爱并有奥特曼玩具 她的奥特曼玩具会跳舞了 娃对我的崇拜和爱又多了一分......amazing 杭州网商路艾弗森 球队需要制作LOGO 形象生动…

【学习】对于加密接口、签名接口如何进行性能测试

随着科技的飞速发展&#xff0c;加密接口和签名接口在我们的日常生活中扮演着越来越重要的角色。从在线支付到信息安全&#xff0c;它们始终默默地守护着我们的数字世界。然而&#xff0c;随着应用场景的不断扩展&#xff0c;性能测试变得尤为重要。今天&#xff0c;让我们一起…

【6】mysql查询性能优化-关联子查询

【README】 0. 先说结论&#xff1a;一般用inner join来改写in和exist&#xff0c;用left join来改写not in&#xff0c;not exist&#xff1b;&#xff08;本文会比较内连接&#xff0c;包含in子句的子查询&#xff0c;exist的性能 &#xff09; 1. 本文总结自高性能mysql 6…

PLC中连接外部现场设备和CPU的桥梁——输入/输出(I/O)模块

输入&#xff08;Input&#xff09;模块和输出&#xff08;Output&#xff09;模块简称为I/O模块&#xff0c;数字量&#xff08;Digital&#xff0c;又称为开关量&#xff09;输入模块和数字量输出模块简称为DI模块和DQ模块&#xff0c;模拟量&#xff08;Analog&#xff09;输…

求a+aa+aaa+……(C语言)

一、题目&#xff1b; 二、N-S流程图&#xff1b; 三、运行结果&#xff1b; 四、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int a 0;int n 0;int i 0;int result 0;int tn 0;//提示用户&am…

Linux学习第52天:Linux网络驱动实验(二):一往(网)情深

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 本节笔记的目录如下&#xff1a; 四、I.MX6ULL网络驱动简介 1.I.MX6ULL网络外设设备树 2.I.MX6ULL网络驱动源码简析 3.fec_netdev_ops操作集 4.Linux内核PHY子…

删除word中下划线的内容

当试卷的题目直接含答案&#xff0c;不利用我们刷题。这时如果能够把下划线的内容删掉&#xff0c;那么将有利于我们复习。 删除下划线内容的具体做法&#xff1a; ①按ctrl H ②点格式下面的字体 ③选择下划线线型中的_____ ④勾选使用通配符并在查找内容中输入"?&qu…

OSI网络七层协议 ——(随手笔记)

1.OSI OSI&#xff08;Open System Interconnect&#xff09;&#xff0c;即开放式系统互连。 一般都叫OSI参考模型&#xff0c;是ISO组织在1985年研究的网络互连模型。该体系结构标准定义了网络互连的七层框架&#xff08;物理层、数据链路层、网络层、传输层、会话层、表示层…

【论文阅读】Attention is all you need

摘要 主要的序列转换模型是基于复杂的循环或卷积神经网络&#xff0c;其中包括一个编码器和一个解码器。性能最好的模型还通过一种注意力机制将编码器和解码器连接起来。我们提出了一种新的简单的网络架构&#xff0c;Transformer&#xff0c;完全基于注意机制&#xff0c;完全…

数据结构-基于ArrayList的源码模拟

文章目录 继承关系 :1. 构造方法的模拟2. 扩容机制的分析3. 查找方法的模拟4. 获取,修改元素的方法模拟5. 添加元素的模拟6. 删除元素的模拟7. removeAll与retainAll的模拟总结: 边缘方法以及总代码 继承关系 : 1. 构造方法的模拟 源码中我们的ArrayList的构造方法给出了三种实…

【Java基础】19.继承(面向对象的三大特征:封装、继承、多态)

文章目录 前言一、继承的概念二、继承的步骤1.类的继承格式2.继承的实例3.继承类型 三、继承的特性四、继承的关键字1.extends关键字2.implements关键字3.super 与 this 关键字4.final 关键字 五、构造器 前言 一、继承的概念 继承是java面向对象编程技术的一块基石&#xff…

Git - 在PyCharm/Idea中集成使用Git

文章目录 Git - 在PyCharm/Idea中集成使用Git1.新建GitHub仓库2.将仓库与项目绑定3.在PyCharm中使用Git4.新建Gitee仓库5.将仓库与项目绑定6.在IDEA中使用Git Git - 在PyCharm/Idea中集成使用Git 本文详细讲解了如何在 PyCharm 或 Idea 中配置 Gitee 或 GitHub 仓库&#xff0…

【算法】深度优先遍历(DFS)算法详解与实现

文章目录 1.算法原理2. 常见的深度优先遍历方式3. 代码实现总结 深度优先遍历&#xff08;DFS&#xff09;是一种常用的树或图的遍历算法&#xff0c;它通过尽可能深地搜索树或图的分支&#xff0c;直到路径上的所有节点都被访问完毕&#xff0c;然后再回溯到上一层&#xff0c…

win10 系统怎么开启 guest 账户?

win10 系统怎么开启 guest 账户&#xff1f; 段子手168 前言&#xff1a; guest 账户即所谓的来宾账户&#xff0c;我们可以通过该账户访问计算机&#xff0c;如打印机共享等&#xff0c;但会在一定程度上受到限制。下面分享 WIN10 系统开启 guest 来宾账户的几种方法。 方法…

袁庭新ES系列15节|Elasticsearch客户端基础操作

前言 上一章节我们介绍了搭建Elasticsearch集群相关的知识。那么又该如何来操作Elasticsearch集群呢&#xff1f;在ES官网中提供了各种语言的客户端&#xff0c;我们在项目开发过程中有多种Elasticsearch版本和连接客户端可以选择&#xff0c;那么他们有什么区别&#xff1f;这…