字符串拆分为 javascript 对象

String split to javascript Object

本文关键字：对象 javascript 拆分 字符串      更新时间：2023-09-26

>我有来自服务器的字符串：

//A
123|155-244
  • 第一个数字总是表示"红色"
  • |后面的数字总是表示"绿色"
  • -后面的数字总是表示"蓝色"

这里的问题是绿色和蓝色可以按任一顺序返回： 

//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"}

我尝试了两个函数，一个用于获取绿色，另一个用于获取蓝色，但我意识到根据它们在字符串中出现的顺序，这无法正常工作。

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

这样做有时会导致我的对象如下所示：

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

我应该怎么做？

不需要正则表达式：

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停止在第一个不可解析的字符处，并在给定垃圾时返回一个 falsy 值。'+' + s技巧是使前导破折号无效(否则会被误认为减号(。

您可能最好使用Regexp来匹配它 - 字符串的每个部分一个。

exec()每个正则表达式和匹配项将存储在结果数组的索引 1 中。如果没有匹配项，则从 exec() 返回null，因此请使用虚拟数组[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));

您可以将String#match与正则表达式一起使用。

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>

你说第一个数字总是红色的，所以

myString = "123-155|244";
red = "0";
green = "0";
blue = "0";
red = mysString.substring(0,3);
if(myString.indexOf("|")!=-1)
{
  green = mystring.substring(myString.indexOf("|")+1,myString.indexOf("|")+4);
}
if(myString.indexOf("-")!=-1)
{
  blue = mystring.substring(myString.indexOf("-")+1,myString.indexOf("-")+4);
}
console.log(red+green+blue);
您可以使用

string.match(regex)： 

var str = "123|155-244",  // <--------the string
  arr = str.match(/('d{3})+/g), // <----creates array out of str
  obj = {
    red: arr[0], // put first one as red value
    green: arr[1], // second one as green value
    blue: arr.length == 3 ? arr[2] : "000" // as per length of array put blue value 
  };
document.querySelector('pre').innerHTML = JSON.stringify(obj);
<pre></pre>

你可以试试这个，最后尝试用所有 3 个条件进行测试-

function rgbFun(a){
    //Define object either way
    //rgb = {'red':0,'blue':0,'green':0}; 
    rgb = {};
    var r = a.substr(0,3),
        b = a.splitOnLast('-')[1], //will check the last splitted value of blue
        g = a.splitOnLast('|')[1]; //will check the last splitted value of green
    rgb.red = r;
    if(b){
        rgb.blue = b.substr(1,3);
    }else{
        rgb.blue = 0;
    }
    if(g){
        rgb.green = g.substr(1,3);
    }else{
        rgb.green = 0;
    }
    return rgb;
}
rgbFun(CaseA);
//Result - {red: "123", blue: "244", green: "155"}
rgbFun(CaseB);
//Result - {red: "123", blue: "244", green: "155"}
rgbFun(CaseC);
//Result - {red: "123", blue: 0, green: "155"}

可能是你想要的，并按照你想要的方式写一些其他条件

var color = {red:null,blue:null,green:null};
var s ="123-244|155";
var blue_index = s.indexOf("|") ;
var green_index = s.indexOf("-") ;
if(blue_index>green_index){
    color.blue = s.split("|")[1];
    s = s.split("|")[0];
}else{
    color.green = s.split("-")[1];
    s = s.split("|")[0];
}
if(s.indexOf("|") > -1){
    color.blue =  s.split("|")[1];
    color.red  =   s.split("|")[0];
}   
if(s.indexOf("-") > -1){
    color.green =  s.split("-")[1];
    color.red  =   s.split("-")[0];
}

请尝试此代码.HTML：-

<h1 id="red">Red</h1>
<h1 id="green">Green</h1>
<h1 id="blue">Blue</h1>
<input type="submit" id="byBtn" value="Change" onclick="change()"/>

JavaScript：-

 var myvar="123-244|155";
 var getGreen = myvar.split('-');
var getBlue = getGreen[1].split('|');
function change(){
red.innerHTML+=" ="+getGreen[0];
blue.innerHTML+=" ="+getBlue[0];
green.innerHTML+=" ="+getBlue[1];
}
相关文章：