如何在 angular 中用逗号替换换行符

Question

我有一个文本区域字段，用户可以在其中输入新行以及逗号分隔值。因此，当我在 API 中发送值时，在新行的情况下会附加 /n，并且在我不想要的详细信息页面上可以看到相同的 /n。下面是用户输入的例子。

Ex-1

ABC

red

test,blue

Ex-2

abc,blue,

green,red

test

我想每次都检查换行符和逗号，我的意思是说如果用户在新行中输入值，则用逗号替换换行符，如果已经附加了逗号然后保持原样。

预期输出

Ex-1

ABC,red,test,blue

Ex-2

abc,blue,green,red,test

下面是我的代码

createData(data) {
    const Obj = {};   
    if (data.enum && data.value_type === 'Enum') {
        Obj['values'] = data.enum.split(',');
    }    
    console.log(Obj,"constraint");
    return Obj;
  }

Answer 1

您需要先用换行符拆分字符串，完成后从数组中删除所有空字符串，然后用 , 连接它。此外，我们需要处理一些双逗号，因为字符串包含逗号。

var str = `ABC

red

test,blue`;

var str2 = `abc,blue,

green,red

test`;
formateString(str);
formateString(str2);

function formateString(str) {

  var strArray = str.split("\n");
  strArray = strArray.filter((item) => {
    return item !== '';
  });
  console.log(strArray.join(",").split(",,").join(","));
}

Answer 2

使用正则表达式split()

Regex Demo

const str1 = `ABC

red

test,blue`;

const str2 = `abc,blue,

green,red

test`;

console.log(str1.split(/[,\n]+\s+/g).join(','))
console.log(str2.split(/[,\n]+\s+/g).join(','))

Answer 3

另一种方法是在用户每次输入字符时拦截输入。使用这种方法，您可以避免在每次击键（包括多余的击键）时一遍又一遍地解析整个文本。

以下是一段简单的代码，可以动态地将换行符和空格替换为逗号。假设您在 HTML.

某处有一个 ID 为 textArea 的文本区域

const textArea = document.getElementById('textArea');

const parseText = function parseText(e) {

  if (e.keyCode === 13 || e.keyCode === 32) {
  
    e && e.preventDefault();
    
    let text = textArea.value;
    let curStart = textArea.selectionStart;
    let curEnd = textArea.selectionEnd;

    if (curStart == text.length && curEnd == text.length && !text.endsWith(',')) {
      text += ',';
      textArea.value = text;
    }

  }


}

textArea.addEventListener('keydown', parseText);

此致

如何在 angular 中用逗号替换换行符

How to replace new line character with comma in angular

javascript

typescript

angular

angular8