2016-06-22 11 views
1

文字列を色の値に分割し、各値でhtml色のコントロールを設定する関数を記述しようとしています。javascript split array空の値

与えられた文字列はユーザ​​によって入力され、mysqliデータベーステーブルから格納され、検索されます。

スプリットアレイの値の一部が空の場合に問題が発生します。これは、カラーコントロールを設定しようとするとエラーが発生しています。

は、私が試してみました何:も試してみました

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'); 

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

エラー:

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

例文字列:

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

カラー値があってもなくてもよい。

;++#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! 

どのように私は、分割によって生成された配列から空の値をチェックしますか?

これは、問題は解決したように見える:空の値以外の値をチェックしTYPEOF

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

それを、そして「」まだそれをチェックし、空に、他のいくつかのものとして分類され、問題を引き起こすのを止める!

+0

入力文字列の例はありますか? – nnnnnn

+0

長さは0? 'color.length == 0' – kirinthos

+0

color.length!= 0を試しましたが、長さが定義されていないという別のエラーが発生していました! – user3633383

答えて

0

このヘルプあなたは:

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

+0

#000は有効な色ですが、明らかに同じエラーが発生します。フォーマットは "#rrggbb"が必要です! – user3633383

1

メソッドを使用します。 val.split(';') はこれが必要以上に複雑です分割:)

+0

if(color [0] .length!== 0)動作しているようだ、thx – user3633383

0

を行うのに十分である、

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

if(color[0] != null) 

交換しても、私は思います... 。

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

それはあなたが

この:-)収穫色の各ステップの制御を微調整さことができます

..ビット行き過ぎであってもよいが、これは、などを指定した文字列からすべてのcolorcodesを収穫し、それらが有効であれば、それらをチェックするかもしれません関数は、カラーコードが見つからない場合は#00000配列のデフォルト値も返します。だからあなたは常に働く戻り値を持っています。これが関数の「契約」です。

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])); 
 

:-)何ヌル、無空の値、および有効なHTMLカラーコード値はまた、3つのカラーコードで構成され、RGB、RGBA値、カラーコードをチェックして、これを拡張することはできません(#fefはほとんどのブラウザでも有効です...)、それを展開してあなたのすべてのgotchasなどを取得してください。