如何在JavaScript中每120字节为文本添加<br>标签

基于你提供的字节计算逻辑，我们可以修改出自动在每120字节处插入<br>标签的函数，同时保证不会拆分单个多字节字符（比如中文、全角符号等）：

function insertBrByByte(text, maxBytePerLine = 120) {
    let result = '';
    let currentByte = 0;

    for (let i = 0; i < text.length; i++) {
        const char = text.charAt(i);
        const uniChar = escape(char);
        // 计算当前字符的字节数：Unicode转义后长度>4的是双字节字符
        const charByte = uniChar.length > 4 ? 2 : 1;

        // 如果加上当前字符会超过限制，先插入<br>再添加字符
        if (currentByte + charByte > maxBytePerLine) {
            result += '<br>';
            currentByte = charByte;
        } else {
            currentByte += charByte;
        }
        result += char;
    }

    return result;
}

// 使用示例
const originalText = "这里是超过120字节的测试文本，包含中文、英文以及各种符号，用于验证每120字节自动插入换行标签的功能是否正常工作。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
const formattedText = insertBrByByte(originalText);
console.log(formattedText);

代码说明： #

• 字节计算逻辑：沿用你提供的escape()方法判断字符字节数，确保中文等双字节字符被正确计算为2字节
• 换行时机：每次添加字符前检查累计字节数，若加上当前字符会超过120字节，则先插入<br>再添加字符，避免拆分单个字符
• 灵活性：通过参数maxBytePerLine可以自定义每行的字节上限，默认设为120
• 返回值：直接返回处理后的带<br>标签的文本，方便你直接插入到页面或后续处理

如果需要和输入框联动（比如实时处理用户输入），可以结合原有逻辑修改：

function handleTextInput(obj) {
    const originalText = obj.value;
    const formattedText = insertBrByByte(originalText);
    // 这里可以将处理后的文本插入到目标元素，比如：
    document.getElementById('formattedResult').innerHTML = formattedText;
    
    // 保留原有的字节统计功能（可选）
    let totalByte = 0;
    for (let i = 0; i < originalText.length; i++) {
        const char = originalText.charAt(i);
        const uniChar = escape(char);
        totalByte += uniChar.length > 4 ? 2 : 1;
    }
    const byteDisplay = document.getElementById('nowByte');
    byteDisplay.innerText = totalByte;
    byteDisplay.style.color = totalByte > 120 ? 'red' : 'green';
}

内容的提问来源于stack exchange，提问作者ChanHoon Park