如何在角度用逗号替换换行符答案

【问题标题】：How to replace new line character with comma in angular如何在角度用逗号替换换行符
【发布时间】：2020-06-05 06:33:12
【问题描述】：

我有一个 textarea 字段，用户可以在其中输入新行以及逗号分隔的值。因此，当我在 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;
  }

【问题讨论】：

stackoverflow.com/questions/11018422/… 看看这是否有帮助。这是在 jquery 中，但它也可以在 angular 中工作
var numlist = "1,4,6,7,3,34,34,634,34"; var numlistNewLine = numlist.replace(/,/g, '\n');

标签： javascript angular typescript angular8

【解决方案1】：

使用正则表达式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(','))

【讨论】：

【解决方案2】：

你需要先用换行符分割字符串，一旦完成，就从数组中删除任何空字符串，并用, 加入它。另外，我们需要注意一些双逗号，因为字符串包含逗号。

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(","));
}

【讨论】：

【解决方案3】：

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

以下是一段简单的代码，它可以用逗号动态替换换行符和空格。假设您的 HTML 中某处有一个 ID 为 textArea 的 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);

问候

【讨论】：