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

要在特定索引处拆分字符串,请使用 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 = ''
    }
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

「GO基础」目录

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

删除word中下划线的内容

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

Linux 序列化、反序列化、实现网络版计算器

目录 一、序列化与反序列化 1、序列化&#xff08;Serialization&#xff09; 2、反序列化&#xff08;Deserialization&#xff09; 3、Linux环境中的应用实例 二、实现网络版计算器 Sock.hpp TcpServer.hpp Jsoncpp库 Protocol.hpp 类 Request 类 Response 辅助函…

SQLite数据库中JSON 函数和运算符(二十七)

返回&#xff1a;SQLite—系列文章目录 上一篇:维护SQLite的私有分支&#xff08;二十六&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 ​1. 概述 默认情况下&#xff0c;SQLite 支持 29 个函数和 2 个运算符 处理 JSON 值。还有两个表值函数可用于分解 JSON 字…

程序员自由创业周记#32:新产品构思

程序员自由创业周记#32&#xff1a;新产品构思 新作品 我时常把自己看做一位木匠&#xff0c;有点手艺&#xff0c;能做一些作品养活自己。而 加一、Island Widgets、Nap 就是我的作品。 接下来在持续维护迭代的同时&#xff0c;要开启下一个作品的创造了。 其实早在2022的1…

【C++初阶】List使用特性及其模拟实现

1. list的介绍及使用 1.1 list的介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前…

(2022级)成都工业学院数据库原理及应用实验五: SQL复杂查询

写在前面 1、基于2022级软件工程/计算机科学与技术实验指导书 2、成品仅提供参考 3、如果成品不满足你的要求&#xff0c;请寻求其他的途径 运行环境 window11家庭版 Navicat Premium 16 Mysql 8.0.36 实验要求 在实验三的基础上完成下列查询&#xff1a; 1、查询医生…

漆包线行业你了解多少?专业漆包线行业MES生产管理系统

今天就说说漆包线行业&#xff0c;漆包线是工业电机&#xff08;包括电动机和发电机&#xff09;、变压器、电工仪表、电力及电子元器件、电动工具、家用电器、汽车电器等用来绕制电磁线圈的主要材料。 漆包线上游是铜杆行业&#xff0c;下游是各种消费终端&#xff0c;主要是电…

[大模型]Qwen-Audio-chat FastApi 部署调用

Qwen-Audio-chat FastApi 部署调用 Qwen-Audio 介绍 Qwen-Audio 是阿里云研发的大规模音频语言模型&#xff08;Large Audio Language Model&#xff09;。Qwen-Audio 可以以多种音频 (包括说话人语音、自然音、音乐、歌声&#xff09;和文本作为输入&#xff0c;并以文本作为…

Linux-用户管理类命令实训

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

Python实现在线翻译工具

Python实现在线翻译工具 使用Python的内置的标准库tkinter和webbrowser&#xff0c;实现一个简单Python在线翻译工具。 tkinter库用来创建一个图形用户界面&#xff08;GUI&#xff09;&#xff0c;webbrowser库用来打开网页。 webbrowser 是 Python 的一个标准库&#xff0…

7.MMD 法线贴图的设置与调教

前期准备 人物 导入温迪模型导入ray.x和ray_controler.pmx导入天空盒time of day调成模型绘制顺序&#xff0c;将天空盒调到最上方给温迪模型添加main.fx材质在自发光一栏&#xff0c;给天空盒添加time of lighting材质 打开材质里的衣服&#xff0c;发现只有一个衣服文件 …

SpringBoot集成FTP

1.加入核心依赖 <dependency><groupId>commons-net</groupId><artifactId>commons-net</artifactId><version>3.8.0</version></dependency> 完整依赖 <dependencies><dependency><groupId>org.springfra…

什么是时间序列分析

时间序列分析是现代计量经济学的重要内容&#xff0c;广泛应用于经济、商业、社会问题研究中&#xff0c;在指标预测中具有重要地位&#xff0c;是研究统计指标动态特征和周期特征及相关关系的重要方法。 一、基本概念 经济社会现象随着时间的推移留下运行轨迹&#xff0c;按…

Linux网络编程--网络传输

Linux网络编程--网络传输 Linux网络编程TCP/IP网络模型网络通信的过程局域网通信跨网络通信&#xff1a;问题总结&#xff1a; Linux网络编程 TCP/IP网络模型 发送方&#xff08;包装&#xff09;&#xff1a; 应用层&#xff1a;HTTP HTTPS SSH等 —> 包含数据&#xff0…

二维码门楼牌管理应用平台建设:助力场所整改与消防安全

文章目录 前言一、二维码门楼牌管理应用平台的构建背景二、二维码门楼牌管理应用平台在场所整改中的作用三、二维码门楼牌管理应用平台的意义与价值四、二维码门楼牌管理应用平台的未来展望 前言 随着城市管理的日益精细化&#xff0c;二维码门楼牌管理应用平台的建设成为了提…

正则表达式中 “$” 并不是表示 “字符串结束”

△△请给“Python猫”加星标 &#xff0c;以免错过文章推送 作者&#xff1a;Seth Larson 译者&#xff1a;豌豆花下猫Python猫 英文&#xff1a;Regex character “$” doesnt mean “end-of-string” 转载请保留作者及译者信息&#xff01; 这篇文章写一写我最近在用 Python …

【Django】学习笔记

文章目录 [toc]MVC与MTVMVC设计模式MTV设计模式 Django下载Django工程创建与运行创建工程运行工程 子应用创建与注册安装创建子应用注册安装子应用 数据模型ORM框架模型迁移 Admin站点修改语言和时区设置管理员账号密码模型注册显示对象名称模型显示中文App显示中文 视图函数与…

英文面试中如何回答为什么离职?柯桥英语口语学校

面试中&#xff0c;面试官可能会问到如下问题&#xff1a; 1.Why are you looking for another job? 你为什么要换工作&#xff1f; 2.May I ask why you left the company? 可以问一下你为什么要离开那家公司吗&#xff1f; 3.What’s the reason for you to leave your …

基于通达信---做T专用算法

什么是做T? 股票做T是股票市场中常见的一种投资策略,也就是股票进行T+0操作,通过当天买进的股票,在当天卖出,是股市中常见的一种超短线的操作。其中T就是指交易日,利用交易日中的股票涨跌来赚取差价。股票做T常见的类型就是正T和倒T。 1、正T 股票做正t就是指先买后卖,…