无法读取属性'长度'为null

时间:2017-03-21 04:23:07

标签: javascript jquery

我已经创建了一个标记功能,因此用户可以通过@符号或#符号进行标记,但问题是通过@符号表示它工作正常但是通过#签名则不是得到任何东西,我无法弄清楚错误,因为当我放置console.log below the if(go.length>0) {条件时它没有给我任何东西,但是当我放在第一个if条件if(go.length>0) {之上时,它给了我返回值我不知道控制台有什么问题我也发现了一个错误无法读取属性'长度' null对这个go.length任何人可以帮助我这里是我的代码



$(document).ready(function() {
var start=/@/ig;
var word=/@(\w+)/ig;

var co_start=/#/ig;
var co_word=/#(\w+)/ig;

$("#contentbox").on("keyup",function() {
    var content = $(this).text();
    var go      = content.match(start);
    var name    = content.match(word);
	
	var content1 = $(this).text();
	var go_com  = content1.match(co_start);
    var co_name = content1.match(co_word);
    var len = $.trim($('#contentbox').text()).length;

    if (len >= 200) {
		content.text = content.text.substring(0, 200);
    } else {
		$('#charNum').text(200 - len);
    }

    if(go.length>0) {
        $("#display").slideUp('show');
        if(name.length>0) {
            $.ajax({
                type     : "POST",
                url      : "http://tfsquare.com/demo/forums/search_user",
                data     : {searchword: name, word: word, command: 'Search User'},
                cache    : false,
                success  : function(html) {
                    $("#display").html(html).show();
                }
            });

        }
    } else {
		alert('Helo World');
		if(go_com.length>0) {
			$("#display").slideUp('show');
			if(co_name.length>0) {
				$.ajax({
					type     : "POST",
					url      : "http://tfsquare.com/demo/forums/search_tag_company",
					data     : {searchword: co_name, co_word: co_word, command: 'Search Company'},
					cache    : false,
					success  : function(html) {
						$("#display").html(html).show();
					}
				});

			}
		}
	}
	
    return false();
});
});

#contentbox {
  with: 150px;
  height: 150px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentbox" contenteditable="true" name="post_dt">
  <div id="data">
  </div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

null没有长度。最简单的方法是检查此对象是否为空,然后查看该值是否具有长度if ( not_null && not_null.length )

$(document).ready(function() {

  var start = /@/ig;
  var word = /@(\w+)/ig;

  var co_start = /#/ig;
  var co_word = /#(\w+)/ig;

  var $contentbox = $('#contentbox'),
    $charNum = $('#charNum'),
    $display = $('#display');

  $contentbox.on('keyup', function() {
    var $box = $(this),
      content = $box.text(),
      go = content.match(start),
      name = content.match(word);

    var go_com = content.match(co_start),
      co_name = content.match(co_word),
      len = $.trim($contentbox.text()).length;

    if (len >= 200) {
      content.text = content.text.substring(0, 200);
    } else {
      $charNum.text(200 - len);
    }

    if (go && go.length) {
      $display.slideUp('show');
      if (name && name.length) {
        $.ajax({
          type: "POST",
          url: "http://tfsquare.com/demo/forums/search_user",
          data: {
            searchword: name,
            word: word,
            command: 'Search User'
          },
          cache: false,
          success: function(html) {
            $display.html(html).show();
          }
        });
      }
    } else {
      alert('Helo World');
      if (go_com && go_com.length) {
        $display.slideUp('show');
        if (co_name && co_name.length ) {
          $.ajax({
            type: "POST",
            url: "http://tfsquare.com/demo/forums/search_tag_company",
            data: {
              searchword: co_name,
              co_word: co_word,
              command: 'Search Company'
            },
            cache: false,
            success: function(html) {
              $display.html(html).show();
            }
          });
        }
      }
    }
    
    return false;
  });

});
#contentbox {
  with: 150px;
  height: 150px;
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="contentbox" contenteditable="true" name="post_dt">
  <div id="data"></div>
</div>
<div id="charNum">200</div>

<div id="display">Display</div>

答案 1 :(得分:0)

我稍微修改了您的代码,以检查您的值是否不等于null,我真的建议您不要使用keyup,因为它会在每次用户时发送请求点击了keyboard,但它取决于您

&#13;
&#13;
$(document).ready(function() {
var start=/@/ig;
var word=/@(\w+)/ig;

var co_start=/#/ig;
var co_word=/#(\w+)/ig;

$("#contentbox").on("blur",function() {
    var content = $(this).text();
    // var start=/@/ig;
    var go      = content.match(start);
    var name    = content.match(word);
    
    var content1 = $(this).text();
    var go_com  = content1.match(co_start);
    var co_name = content1.match(co_word);
    var len = $.trim($('#contentbox').text()).length;

    if (len >= 200) {
        content.text = content.text.substring(0, 200);
    } else {
        $('#charNum').text(200 - len);
    }

console.log(content.match(start))

    if(go != null && go.length > 0) {
        $("#display").slideUp('show');
        if(name !=null && name.length>0) {
            $.ajax({
                type     : "POST",
                url      : "http://tfsquare.com/demo/forums/search_user",
                data     : {searchword: name, word: word, command: 'Search User'},
                cache    : false,
                success  : function(html) {
                    $("#display").html(html).show();
                }
            });

        }
    } else {
        alert('Helo World');
        if(go_com != null && go_com.length>0) {
            $("#display").slideUp('show');
            if(co_name.length>0) {
                $.ajax({
                    type     : "POST",
                    url      : "http://tfsquare.com/demo/forums/search_tag_company",
                    data     : {searchword: co_name, co_word: co_word, command: 'Search Company'},
                    cache    : false,
                    success  : function(html) {
                        $("#display").html(html).show();
                    }
                });

            }
        }
    }
    
    return false;
});
});
&#13;
#contentbox {
  with: 150px;
  height: 150px;
  background-color: #ccc;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentbox" contenteditable="true" name="post_dt">
  <div id="data">
  </div>
  
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

看起来这是主要问题。你的正则表达式是错误的,也是js。

为了捕获#,你需要在它之前添加\

Demo here

&#13;
&#13;
    $(document).ready(function() {
    var start=/@/gim;
    var word=/@(\w+)/gim;
    
    var co_start=/\#/gim;
    var co_word=/\#(\w+)/gim;
    
    $("#contentbox").on("keyup",function() {
        var content = $(this).text();
        var go      = content.match(start);
        var name    = content.match(word);
    	
    		var go_com  = content.match(co_start);
        var co_name = content.match(co_word);
        var len = $.trim($('#contentbox').text()).length;
    
        if (len >= 200) {
    				$('#charNum').text('0');
    				content.text = content.text.substring(0, 200);
        } else {
    				$('#charNum').text(200 - len);
        }
        
        if (go && go.length > 0) {
    		alert('@');
            $("#display").slideUp('show');
            if(name.length>0) {
                $.ajax({
                    type     : "POST",
                    url      : "http://tfsquare.com/demo/forums/search_user",
                    data:{searchword:name,word: word, command: 'Search User'},
                    cache    : false,
                    success  : function(html) {
                        $("#display").html(html).show();
                    }
                });
    
            }
        } 
//else {
    //		alert('Helo World');
    		if(go_com && go_com.length>0) {
    		alert('#');
    			$("#display").slideUp('show');
    			if(co_name.length>0) {
    				$.ajax({
    					type     : "POST",
    			url: "http://tfsquare.com/demo/forums/search_tag_company",
    					data     : {searchword: co_name, co_word: co_word, command: 'Search Company'},
    					cache    : false,
    					success  : function(html) {
    						$("#display").html(html).show();
    					}
    				});
    
    			}
    		}
        //alert('action');
    	//}
    	
        return false();
    });
    });
&#13;
#contentbox {
  with: 150px;
  height: 150px;
  background-color: #ccc;
}
&#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="contentbox" contenteditable="true" name="post_dt">
  <div id="data">
  </div>
</div>

<div id="charNum">200</div>

<div id="display">Display</div>
&#13;
&#13;
&#13;