当前位置:首页 > JavaScript

js原生实现split

2026-02-02 22:46:21JavaScript

原生 JavaScript 实现 split 方法

split 是 JavaScript 字符串的原生方法,用于将字符串按指定分隔符拆分为数组。以下是手动实现 split 功能的几种方法:

方法一:基础实现(按字符拆分)

function customSplit(str, delimiter) {
    const result = [];
    let current = '';
    for (let i = 0; i < str.length; i++) {
        if (str[i] === delimiter) {
            result.push(current);
            current = '';
        } else {
            current += str[i];
        }
    }
    result.push(current); // 添加最后一部分
    return result;
}

// 示例
console.log(customSplit('a,b,c', ',')); // 输出: ['a', 'b', 'c']

说明

  • 遍历字符串,遇到分隔符时将当前累积的子串加入结果数组。
  • 最后需处理剩余的子串。

方法二:支持多字符分隔符

function customSplit(str, delimiter) {
    const result = [];
    let start = 0;
    let index = str.indexOf(delimiter);
    while (index !== -1) {
        result.push(str.slice(start, index));
        start = index + delimiter.length;
        index = str.indexOf(delimiter, start);
    }
    result.push(str.slice(start)); // 添加剩余部分
    return result;
}

// 示例
console.log(customSplit('hello##world##!', '##')); // 输出: ['hello', 'world', '!']

说明

  • 使用 indexOf 查找分隔符位置,通过 slice 截取子串。
  • 支持多字符分隔符(如 ##)。

方法三:支持正则表达式分隔符

function customSplit(str, delimiter) {
    const result = [];
    let lastIndex = 0;
    const regex = new RegExp(delimiter, 'g');
    let match;
    while ((match = regex.exec(str)) !== null) {
        result.push(str.slice(lastIndex, match.index));
        lastIndex = match.index + match[0].length;
    }
    result.push(str.slice(lastIndex)); // 添加剩余部分
    return result;
}

// 示例
console.log(customSplit('a1b2c', /\d/)); // 输出: ['a', 'b', 'c']

说明

  • 通过正则表达式匹配分隔符,处理动态模式(如数字、空格等)。

方法四:处理空字符串和限制拆分次数

function customSplit(str, delimiter, limit) {
    const result = [];
    let start = 0;
    let index = str.indexOf(delimiter);
    while (index !== -1 && result.length < limit - 1) {
        result.push(str.slice(start, index));
        start = index + delimiter.length;
        index = str.indexOf(delimiter, start);
    }
    result.push(str.slice(start)); // 添加剩余部分
    return result;
}

// 示例
console.log(customSplit('a,b,c,d', ',', 2)); // 输出: ['a', 'b,c,d']

说明

js原生实现split

  • 通过 limit 参数控制拆分后的数组长度。
  • 当达到限制时,剩余部分作为最后一个元素。

注意事项

  1. 原生 split 的边界情况
    • 空分隔符:将字符串拆分为单字符数组。
    • 分隔符在开头/结尾:生成空字符串元素。
  2. 性能优化
    • 对于长字符串,避免频繁拼接(如方法一),优先使用 slice(如方法二)。
  3. 正则表达式
    • 复杂分隔符(如多个空格)需通过正则实现,但需注意贪婪匹配问题。

以上方法可根据实际需求组合或扩展,覆盖原生 split 的核心功能。

标签: jssplit
分享给朋友:

相关文章

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js实现图片滚动

js实现图片滚动

图片滚动的实现方法 使用CSS动画实现 通过CSS的animation和@keyframes可以实现简单的图片滚动效果。这种方法适合静态图片的无缝循环滚动。 <style> .scr…