字符串拆分为javascript对象

Question

我有来自服务器的字符串:

//A
123|155-244

• 第一个数字总是表示'红色'
• 数字后|总是意味着'绿色'
• 数字后-总是意味着'蓝'

这里的问题是Green和Blue可以按任意顺序返回:

//B
123-244|155

或者他们可能完全失踪:

//C
123|155 

我需要一个返回一个数组/对象的函数来简化:

//A
var result = {red:"123", green:"155", blue:"244"}

//B
var result = {red:"123", green:"155", blue:"244"}

//C
var result = {red:"123", green:"155", blue:"0"}

我已经尝试了两个函数,一个是获得Green而另一个是Blue,但我意识到它不能正常工作,具体取决于它们出现在字符串中的顺序.

var getGreen = function(myvar){
    return myvar.split('-'); 
};
var getBlue = function(myvar){
    return myvar.split('|'); 
};

这样做有时会导致我的对象看起来像这样:

var result = {red:"123", green:"155", blue:"244|155"}

我该怎么办？

Answer 1

不需要正则表达式:

parse = function(s) {
    return {
        red:   parseInt('+' + s, 10) || 0,
        green: parseInt(s.split('|')[1], 10) || 0,
        blue:  parseInt(s.split('-')[1], 10) || 0,
    };
};

//

test = [
    '123',
    '222|333-444',
    '55-66|77',
    '123|456',
    '123-456',
    '|123-456',
    '-123|456',
    '010|020-030',
  
];
  
test.map(parse).forEach(r => 
   document.write('<pre>' + JSON.stringify(r) + '</pre>'));

这使用了parseInt在第一个非可解析字符处停止并在给定垃圾时返回虚假值的事实.该'+' + s黑客是无效的前导破折号(否则会被误认为是减号).

Answer 2

你可能最好用a Regexp来匹配它 - 一个用于字符串的每个部分.

exec()每个正则表达式和匹配项将存储在结果数组的索引1中.如果没有匹配,那么null从中返回exec(),所以使用[null, 0]简化的虚拟数组.

虽然不是必需的,但如果没有红色值,这也有效.

function getRGB() {
  var reRed = /^([0-9]+)/; // start of string (^) then match 1+ numbers
  var reGreen = /\|([0-9]+)/; // a "|" then match 1+ numbers
  var reBlue = /-([0-9]+)/;  // a "-" then match 1+ numbers

  return {
    red: (reRed.exec(input) || [null, 0])[1],
    green: (reGreen.exec(input) || [null, 0])[1],
    blue: (reBlue.exec(input) || [null, 0])[1]
  };
}

// RGB
var input = '123|155-244';
console.log(input, getRGB(input));

// RBG
var input = '123-244|155';
console.log(input, getRGB(input));

// RB
input = '123-244';
console.log(input, getRGB(input));

// BG
var input = '-244|155';
console.log(input, getRGB(input));

Answer 3

您可以使用String#matchRegEx.

var str = '123|155-244';

var result = {
    red: (str.match(/^\d+/) || [0])[0], // Get first digits or zero
    green: (str.match(/\|(\d+)/) || [0, 0])[1], // Get digits after `|` or zero
    blue: (str.match(/-(\d+)/) || [0, 0])[1] // Get digits after `-` or zero
};

console.log(result);
document.getElementById('pre').innerHTML = JSON.stringify(result, 0, 4);

<pre id="pre"></pre>

原始答案

误解了-并且|可以互换,但颜色的顺序将固定为红色,绿色,然后是蓝色.

你可以使用String#split正则表达式.

var str = '123|155-244';
var colors = ['red', 'green', 'blue'];
var result = {};

var arr = str.split(/\||-/g);
arr.forEach((e, i) => result[colors[i]] = arr[i]);

console.log(result);
document.getElementById('result').innerHTML = JSON.stringify(result, 0, 4);

<pre id="result"></pre>

正则表达式说明:

简单的正则表达式\||-将通过管道|或分裂字符串-.

另一个现场演示:

var colors = ['red', 'green', 'blue'];

document.getElementById('input').addEventListener('keyup', function() {
  var str = this.value;
  var result = {};

  var arr = str.split(/\||-/g);
  arr.forEach((e, i) => result[colors[i]] = arr[i]);
  console.log(result);
  document.getElementById('result').innerHTML = JSON.stringify(result, 0, 4);
}, false);

<input id="input" />

<pre id="result"></pre>