CODEWITHSUNDEEP
javascriptarraysstringsplit
Zast
Zast

Reputation: 502

javascript split array empty value

I am trying to write a function that splits a string in to color values, then sets a html color control with each value.

The given string is input by the user, then stored and retrieved from a mysqli database table.

I am having trouble when some of the split array values may be empty. This is causing an error when trying to set the color control.

What I have tried:

 if( res[ PAGE_CUSTOM_LINK_COLOR ] == undefined ) val = '';
 else val = res[ PAGE_CUSTOM_LINK_COLOR ];

 var color = val.split(";++");
 if( color[ 0 ] != null ){
    $( '#custom_p_color' ).val( color[ 0 ] );
 }else $( '#custom_p_color' ).val( '#000000' );

Also tried:

 if( color[ 0 ] != '' ){

The error:

 The specified value "" does not conform to the required format.  The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

Example strings:

 #800040;++#ff8000;++border: 0; border-bottom: 5px dotted #eeffee

The color values may or may not be present:

 ;++#ff8000;++border: 0; border-bottom: 2px dotted #eeffee
 #800040;++;++border: 0; border-bottom: 2px dotted #eeffee
 ;++;++border: 0; border-bottom: 2px dotted #eeffee
 ;++;++ <- would be the bare minimum string!

How do I check for an empty value from the array generated by split?

This appears to have solved the problem:

    if (typeof color[0] != "undefined" && color[0] !== '')

It typeof checks for any value other than an empty value, and the '' is still classed as some thing other then empty, so checking for it, stops it causing the problem!

Upvotes: 1

Views: 2556

Answers (4)

Tschallacka
Tschallacka

Reputation: 28732

This might be a bit overkill, but this harvests all the colorcodes from a given string and checks them if they are valid, etc..

It allows you finetuned control over each step of harvesting colors :-)

This function also returns a default value of #00000 array if no colour codes were found. So you ALWAYS have a return value to work with. That's the "contract" of the function. no nulls, no empty values, and valid html color code values :-)

function isValid(input) {
        return input.length == 1 && '1234567890abcdef'.indexOf(input.toLowerCase()) > -1;
    }
    /**
     * Parses given string for #RRGGBB style color codes. 
     * @var input string optionally containing color codes in format #RRGGBB
     * @returns array with color codes. array with one value #000000 if no color codes were found in string.
     */
    function getColorCodes(input) {
       var charArr = input.split('');
       var codesArray = [];

       /** walk through all the characters to check for valids :-) **/
       for(var i = 0; i < charArr.length; i++) {
          /** found our marker! **/
          if(charArr[i] == '#') {
             var builder = '';
             for(var n = i+1; n < i + 7; n++) {
                if(isValid(charArr[n])) {
                   builder += charArr[n];
                }
                else {
                    break;
                }
             }
             /** found all legal characters! **/
             if(builder.length == 6) {
                 i += 7;
                 codesArray.push('#'+builder);
             }

          }
       }
       /** if not empty, then return the retrieved results **/
       if(codesArray.length > 0) {
           return codesArray;
       }
       /** If code arrived at this point it means the codes array was
           emtpy. Add our default value and return it **/
       codesArray.push('#000000');
       return codesArray;
    }
    
    var examplestrings = [' ;++#ff8000;++border: 0; border-bottom: 2px dotted #eeffee',
                           '#800040;++;++border: 0; border-bottom: 2px dotted #eeffee',
                           ' ;++;++border: 0; border-bottom: 2px dotted #eeffee',
                            ' ;++;++'];
    for(var i = 0; i < examplestrings.length; i++) 
         console.log(getColorCodes(examplestrings[i]));

You can expand this by also checking for rgb, rgba values, color codes that consist of 3 color codes(#fef is also valid for most browsers...) and expand that to get all your gotchas etc..

Upvotes: 1

Prakash Thiru
Prakash Thiru

Reputation: 41

Use length method. Replace

if(color[0] != null)

with

if(color[0].length !== 0)

and also I think, val.split(';') is enough to do the split up :)

Upvotes: 1

glend
glend

Reputation: 1622

This is more complicated than it needs to be.... 

if( res[ PAGE_CUSTOM_LINK_COLOR ] == undefined ) {
    $( '#custom_p_color' ).val( '#000000' );
} else {
     var color = val.split(";++");
     $( '#custom_p_color' ).val( color[ 0 ] );
};

Upvotes: 0

Ehsan
Ehsan

Reputation: 12959

This help you :

<html>
    <head>
    </head>
    <body>
        Custom : <input type="text" id="custom_p_color">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script>
            var str = ";++blue;++"
            var color = str.split(";++");
            if(color[0]!='' && color[0]!==' ')
               $("#custom_p_color").val(color[0]);
            else
               $("#custom_p_color").val("#000");
        </script>
    </body>
</html>

Upvotes: 0

Related Questions