为字符串添加右填充实现文本域内纯文本表格行列对齐问题咨询

解决方案 #

核心原因 #

你目前的对齐失效是因为半角空格在非等宽字体下宽度不固定，浏览器控制台默认用等宽字体所以显示正常，alert弹窗用的系统非等宽字体所以错位。
另外首先纠正一个误解：alert的字体和textarea的字体没有关联，绝大多数浏览器的textarea默认就是等宽字体，你可以先把原有代码生成的字符串直接填入textarea测试，大概率已经是对齐的，不需要额外修改。

如果实际测试textarea确实是非等宽字体，且你无法修改字体配置，可以用以下两种方案解决： #

方案1：全角空格填充（兼容性最高，非等宽字体下也能保证宽度一致） #

全角空格在所有字体中的宽度都和汉字宽度一致，是固定值，不会出现半角空格宽度随字体变化的问题。你可以修改填充逻辑，配合字符宽度计算实现精准对齐：

var content = [
    { columnName: 'Date of Birth:', value: '11/26/1994', 'editable':'N'},
    { columnName: 'Name:', value:  'Lewis Menelaws', 'editable':'Y'},
    { columnName: 'Address:', value:  '123 Apple Road', 'editable':'N'}
];

// 计算字符串显示宽度：半角字符占1单位，全角/中文字符占2单位
function getStrDisplayWidth(str) {
    let width = 0;
    for(let i = 0; i < str.length; i++) {
        width += str.charCodeAt(i) > 255 ? 2 : 1;
    }
    return width;
}

function padEnd(str, targetWidth = 30){
    const currentWidth = getStrDisplayWidth(str);
    // 每个全角空格占2单位宽度，计算需要填充的数量
    const needPad = Math.ceil((targetWidth - currentWidth) / 2);
    return str + '　'.repeat(needPad); // 此处为全角空格，不要替换为半角
}

let str = '';
content.forEach(obj => {
    str += padEnd(obj.columnName, 30);
    str += padEnd(obj.value, 40);
    str += obj.editable + '\n';
});
// 直接赋值到textarea测试效果
document.querySelector('textarea').value = str;

方案2：制表符分隔（修改量最小） #

如果你的场景允许使用制表符，可以直接用\t分隔列，大多数textarea会默认将制表符渲染为固定宽度（通常是4或8个空格宽度），也能实现对齐效果：

let str = '';
content.forEach(obj => {
    str += obj.columnName + '\t';
    str += obj.value + '\t';
    str += obj.editable + '\n';
});

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