Question

我正在尝试编写一个将字符串拆分为颜色值的函数，然后使用每个值设置一个html颜色控件。

给定的字符串由用户输入，然后从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!

如何检查split生成的数组中的空值？

这似乎解决了这个问题：

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

它检查除空值以外的任何值，并且＆＃39;＆＃39;仍然被归类为除了空的一些东西，所以检查它，停止它导致问题！

Answer 1

使用 length 方法。取代

if(color[0] != null)

与

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

而且我认为， val.split(';') 分裂就足够了:)）

Answer 2

这可能有点矫枉过正，但这会收集给定字符串中的所有颜色代码并检查它们是否有效等等。

它允许您对收获颜色的每个步骤进行微调控制： - ）

如果未找到颜色代码，此函数还会返回默认值＃00000数组。所以你总是有一个返回值可以使用。这是该功能的“合同”。没有空值，没有空值和有效的html颜色代码值： - ）

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

你可以通过检查rgb，rgba值，由3种颜色代码组成的颜色代码（#fef对大多数浏览器也有效......）进行扩展，并扩展它以获取所有的问题等。

Answer 3

这有助于您：

＆＃13;

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

＆＃13;

Answer 4

这比它需要的更复杂....

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

javascript拆分数组空值

4 个答案: