flutter 输入时插入分隔符

每四位插入一个分隔符

import 'package:flutter/services.dart';

class DividerInputFormatter extends TextInputFormatter {
  final int rear; //第一个分割位数,后面分割位,,数
  final String pattern; //分割符

  DividerInputFormatter({this.rear = 4, this.pattern = ' '});

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    //不含分隔符的文本
    String allTextPure = newValue.text.replaceAll(RegExp(pattern), '');
    //处理后含分隔符的文本
    String allTextDeal = '';
    //光标位置
    int cursorPosition = newValue.selection.baseOffset;
    for (int i = 0; i < allTextPure.length; i++) {
      if ((i > 0 && (i) % rear == 0) && allTextPure[i] != pattern) {
        allTextDeal = '$allTextDeal$pattern';
      }
      allTextDeal += allTextPure[i];
    }

    ///光标在文字最右侧(尾部)的情况,光标始终在最后
    if (cursorPosition >= newValue.text.length) {
      return TextEditingValue(
        text: allTextDeal,
        selection: TextSelection.collapsed(offset: allTextDeal.length),
      );
    }

    ///光标不在文字尾部的情况
    //如果原光标位置变为分割符,则说明左侧增加一位,光标也加一位
    if (allTextDeal.substring(cursorPosition - 1, cursorPosition) == pattern) {
      cursorPosition++;
    }
    return TextEditingValue(
      text: allTextDeal,
      selection: TextSelection.collapsed(offset: cursorPosition),
    );
  }
}

 手机号规则分隔符


import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MaterialApp(home: DividerFormatterPage()));

class DividerFormatterPage extends StatelessWidget {
  const DividerFormatterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Scaffold(body: _buildBody());

  _buildBody() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15, vertical: 100),
      child: TextField(
        inputFormatters: [
          DividerInputFormatter(pattern: '-'),
          FilteringTextInputFormatter.allow(RegExp(r'[0-9\s\-]')),
          LengthLimitingTextInputFormatter(13),
        ],
      ),
    );
  }
}

class DividerInputFormatter extends TextInputFormatter {
  final int first, rear; //第一个分割位数,后面分割位,,数
  final String pattern; //分割符

  DividerInputFormatter({this.first = 3, this.rear = 4, this.pattern = ' '});

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    //不含分隔符的文本
    String allTextPure = newValue.text.replaceAll(RegExp(pattern), '');
    //处理后含分隔符的文本
    String allTextDeal = '';
    //光标位置
    int cursorPosition = newValue.selection.baseOffset;
    for (int i = 0; i < allTextPure.length; i++) {
      if ((i == first || (i - first) % rear == 0) && allTextPure[i] != pattern) {
        allTextDeal = '$allTextDeal$pattern';
      }
      allTextDeal += allTextPure[i];
    }

    ///光标在文字最右侧(尾部)的情况,光标始终在最后
    if (cursorPosition >= newValue.text.length) {
      return TextEditingValue(
        text: allTextDeal,
        selection: TextSelection.collapsed(offset: allTextDeal.length),
      );
    }

    ///光标不在文字尾部的情况
    //如果原光标位置变为分割符,则说明左侧增加一位,光标也加一位
    if (allTextDeal.substring(cursorPosition - 1, cursorPosition) == pattern) {
      cursorPosition++;
    }
    return TextEditingValue(
      text: allTextDeal,
      selection: TextSelection.collapsed(offset: cursorPosition),
    );
  }
}
 

 

<think>嗯,用户想知道如何实现文本分隔的功能。我需要先理解他们的具体需求。根据提供的引用内容,用户可能是在不同的编程环境中处理文本分隔的问题,比如JavaScript、Flutter或者处理文本文件的分隔符更改。 首先,引用[1]提到用JavaScript将多行文本按换行分隔成数组。这说明用户可能需要在网页前端处理textarea中的多行输入。这候应该考虑不同操作系统换行符的差异,比如Windows用\r\n,而Linux/macOS用\n。所以处理需要兼容这两种情况,可以用split方法结合正则表达式。 然后引用[2]是关于Flutter中使用TextInputFormatter实现带分隔符输入。这可能涉及到格式化用户输入,比如自动添加逗号或空格作为分隔符。这里需要了解TextInputFormatter的工作原理,通过正则表达式限制输入,并在适当的位置插入分隔符,同处理光标位置,避免用户输入出现问题。 引用[3]涉及更改文本文件的分隔符,比如将制表符分隔的文件改为其他分隔符。这可能是在数据导入或处理需要调整分隔符,比如将tab替换为逗号,同处理文本限定符如双引号。这里需要注意转义字符和如何处理包含分隔符的字段,可能需要使用专门的库如Python的csv模块来可靠处理。 接下来,用户的问题是如何实现文本分隔,或者有哪些方法。我需要综合这三个引用中的不同场景,给出具体的实现步骤和示例代码。比如在JavaScript中分割多行文本,在Flutter中格式化输入,以及在Python中处理CSV文件的分隔符更改。 同,用户可能需要了解不同场景下的最佳实践,比如处理换行符的兼容性,输入的用户体验,以及处理复杂分隔符的可靠性问题。需要确保提供的解决方案覆盖这些方面,并给出注意事项,比如转义字符和性能问题。 另外,用户可能没有明确说明他们的具体使用环境,所以需要提供多种常见场景的解决方法,并建议根据具体需求选择合适的方法。比如前端处理、移动应用输入格式化和后端文件处理的不同方法。 最后,生成的相关问题需要覆盖不同方面,比如性能优化、特殊字符处理、多语言支持等,帮助用户进一步探索可能遇到的问题。</think>### 文本分隔的实现方法 文本分隔功能根据具体场景和需求,可通过以下方法实现: --- #### 一、按换行符分隔文本(如JavaScript处理多行输入) **适用场景**:前端处理`<textarea>`中的多行文本数据 ```javascript // 获取文本并分割为数组(兼容不同系统的换行符) const text = document.querySelector('textarea').value; const lines = text.split(/\r?\n/); // 匹配\r\n或\n[^1] // 示例输入: // "第一行↵第二行↵第三行" // 输出:["第一行", "第二行", "第三行"] ``` **注意**:正则表达式`/\r?\n/`可同处理Windows和Unix系统的换行符 --- #### 二、带格式的分隔输入(如Flutter输入框) **适用场景**:移动端输入信用卡号、日期等需要自动添加分隔符的场景 ```dart class SeparatorFormatter extends TextInputFormatter { final String separator; final int interval; SeparatorFormatter({this.separator = '-', this.interval = 4}); @override TextEditingValue formatEditUpdate(...) { // 过滤非数字字符 String newText = newValue.text.replaceAll(RegExp('[^0-9]'), ''); // 插入分隔符 StringBuffer buffer = StringBuffer(); for (int i = 0; i < newText.length; i++) { if (i > 0 && i % interval == 0) buffer.write(separator); buffer.write(newText[i]); } // 保持光标位置正确 int offset = buffer.length; return TextEditingValue( text: buffer.toString(), selection: TextSelection.collapsed(offset: offset) ); } } // 使用示例:TextField(inputFormatters: [SeparatorFormatter()])[^2] ``` --- #### 三、文件分隔符处理(Python示例) **适用场景**:处理CSV/TXT文件的分隔符转换 ```python import csv # 将制表符分隔文件转为逗号分隔 with open('input.txt', 'r') as fin, open('output.csv', 'w') as fout: reader = csv.reader(fin, delimiter='\t', quotechar='"') writer = csv.writer(fout, delimiter=',', quoting=csv.QUOTE_MINIMAL) for row in reader: writer.writerow(row) # 自动处理带引号的字段[^3] ``` --- ### 关键注意事项 1. **编码问题**:处理文件需统一字符编码(推荐UTF-8) 2. **转义字符**:处理包含分隔符的文本需使用引号包裹字段 3. **性能优化**:大文件处理建议使用流式读取(逐行处理) 4. **用户体验**:输入格式化需保持光标位置合理移动 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值