Textarea计数行,使用正则表达式计算连字符行

时间:2017-04-29 14:36:47

标签: javascript jquery html css

我一直试图找出问题,使用正则表达式忽略以双连字符开头的行,并将单行计为单独的双联连线并单独计算,并显示在文本区域之外。

我已经尝试过计算每一行但是忽略了连字符并计算成功我不知道如何使用正则表达式来做到这一点。

另一方面,我想在span项目中附加代码,但它删除了item元素的文本。

这是我的代码和示例图片。 Sample Image of Final Output



$(document).ready(function(){
    
    var items = $('#items');
    var groups = $('#groups');
    
    $('#ingredients_list').keydown(function(e) {
        newLines = $(this).val().split("\n").length;
        items.text(newLines);
    });
});

.ingredients__section {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.ingredients__section textarea {
  width: 100%;
}

.ingredients__section h2 {
  color:#0433a7;
  margin-bottom: 20px;
}

.ingredients__header {
  display: table;
  width: 100%;
  table-layout:fixed;
}
.ingredients__title { display: table-cell; }
.ingredients__countinfo { display: table-cell; text-align:right; }

.item-count,
.group-count { padding: 5px 15px; background-color:#e4ebef; margin-left: 5px; font-size: 14px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingredients__section">
<div class="ingredients__header">
<div class="ingredients__title"><h2>INGREDIENTS</h2></div>
<div class="ingredients__countinfo">
  <span class="group-count" id="groups">Groups:</span>
  <span class="item-count" id="items">Items:</span>
</div>
</div>
<form>
    <textarea id="ingredients_list" rows="15"></textarea><br />
</form>

</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

初始化计数器

var groupsCount = 0;
var itemsCount = 0;

获取输入文本数组

var arrayOfItems = $(this).val().split("\n");

运行数组中的所有元素并检查前两个符号。如果是--,则为groupsCount++其他itemsCount++

for (var i=0; i<arrayOfItems.length; i++) {
  if (arrayOfItems[i][0] === '-' && arrayOfItems[i][1] === '-') {
    groupsCount += 1;
    itemsCount -= 1;
    groups.text("Groups: " + groupsCount);
  } else {
    itemsCount += 1;
    items.text("Items: " + itemsCount);
  }
}

&#13;
&#13;
$(document).ready(function(){
    
    var items = $('#items');
    var groups = $('#groups');
    
    $('#ingredients_list').keypress(function(e) {
        var groupsCount = 0;
        var itemsCount = 0;
        var arrayOfItems = $(this).val().split("\n");
        for (var i=0; i<arrayOfItems.length; i++) {
          if (arrayOfItems[i] != '') {
            if (arrayOfItems[i][0] === '-' && arrayOfItems[i][1] === '-') {
              groupsCount += 1;
              groups.text("Groups: " + groupsCount);
            } else {
              itemsCount += 1;
              items.text("Items: " + itemsCount);
            }
          } else {
            groups.text("Groups: " + groupsCount);
            items.text("Items: " + itemsCount);
          }
        }
    });
    $(document).mousedown(function (e) {
        var groupsCount = 0;
        var itemsCount = 0;
        var arrayOfItems = $('#ingredients_list').val().split("\n");
        for (var i=0; i<arrayOfItems.length; i++) {
          if (arrayOfItems[i] != '') {
            if (arrayOfItems[i][0] === '-' && arrayOfItems[i][1] === '-') {
              groupsCount += 1;
              groups.text("Groups: " + groupsCount);
            } else {
              itemsCount += 1;
              items.text("Items: " + itemsCount);
            }
          } else {
              groups.text("Groups: " + groupsCount);
              items.text("Items: " + itemsCount);
          }
        }
    });
});
&#13;
.ingredients__section {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.ingredients__section textarea {
  width: 100%;
}

.ingredients__section h2 {
  color:#0433a7;
  margin-bottom: 20px;
}

.ingredients__header {
  display: table;
  width: 100%;
  table-layout:fixed;
}
.ingredients__title { display: table-cell; }
.ingredients__countinfo { display: table-cell; text-align:right; }

.item-count,
.group-count { padding: 5px 15px; background-color:#e4ebef; margin-left: 5px; font-size: 14px; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingredients__section">
<div class="ingredients__header">
<div class="ingredients__title"><h2>INGREDIENTS</h2></div>
<div class="ingredients__countinfo">
  <span class="group-count" id="groups">Groups:</span>
  <span class="item-count" id="items">Items:</span>
</div>
</div>
<form>
    <textarea id="ingredients_list" rows="15"></textarea><br />
</form>

</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

很好,但我已经看到,如果您输入带有双连字符--或没有相同--的单词,则会向+1groupItems添加listItems --这不是你想要的。 这意味着如果您使用+1启动群组名称,则应将groups添加到items而不是$(document).ready(function(){ var items = $('#items'); var groups = $('#groups'); $('#ingredients_list').keypress(function(e) { var groupsCount = 0; var itemsCount = 0; var arrayOfItems = $(this).val().split("\n"); console.log(arrayOfItems); for (var i=0; i<arrayOfItems.length; i++) { if (arrayOfItems[i][0] === '-' && arrayOfItems[i][1] === '-') { groupsCount += 1; groups.text("Groups: " + groupsCount); } if (arrayOfItems[i][0] === '.'){ // I have given '.' here in single quote, you can add regex what you are looking for like numbers, letters, or expressions that start with. itemsCount += 1; items.text("Items: " + itemsCount); } } }); }); ,因此以下是您的代码中的小变化,可能有助于您修复

if($user['is_admin']) {
    $this->session->sess_expiration = '300'; //5 Minutes
} else if($user['is_sub_admin']) {
    $this->session ->sess_expiration = '900'; //30 Minutes
} else {
    $this->session->sess_expiration = '1800'; //30 Minutes
}