如何用角逗号替换新的行字符

Question

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

Ex-1

ABC

red

test,blue

Ex-2

abc,blue,

green,red

test

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

预期产出

前-1

ABC,red,test,blue

前-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

使用regex 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的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);

​

问候