在行中找到某些文字,然后隐藏这些行

时间:2016-06-27 12:36:34

标签: javascript jquery css

我正在运行查看每一行的javascript。我希望能够搜索每一行,如果该行包含某些文本,则隐藏该行。例如:

  <input id="search" type="button" value="Run" />
  <textarea id="main" style="height:150px;">
   300 300 300
   300 200 300
   100 100 150
  </textarea>

的Javascript

$('#search').bind('click', function () {
    var lines = $("#main").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if($([i].contains('300' || '200'){
            $(lines).css('display','none');
        }
    }

});

代码打破了行,所以在这个例子中它是3行。但是如何告诉它从每一行中找到某些文本并且不显示该行而不是仅仅取出该行。所以从上面输出的是:

    100 100 150

3 个答案:

答案 0 :(得分:2)

您需要替换整个textarea值。由于textarea只包含文本,因此每行都没有内部html可以以任何方式隐藏或设置样式...它是全部或没有

以下过滤器拆分数组然后使用换行符作为分隔符

将其连接回来

$('#search').on('click', function() {
  $("#main").val(function(_, oldVal) {   
    return oldVal.split('\n').filter(function(str) {
      return str.indexOf('200') === -1 && str.indexOf('300')=== -1
    }).join('\n');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" type="button" value="Run" />
<textarea id="main" style="height:150px;">
  300 300 300
  300 200 300 
  100 100 150
</textarea>

答案 1 :(得分:1)

  <textarea id="main" style="height:150px;">
    300 300 300
    300 200 300
    100 100 150
  </textarea>




  <script>
  var text_not_allow = ["200", "300"];

  //here, extracting the text innerHTML as posted. usually text area are kept in 'value' attribute
  var text_area_array =document.getElementById('main').innerHTML.split('\n');
  var final_text = '';



  for (var i=0;i<text_area_array;i++)
  {

    var line=text_area_array[i];

    var line_allow=true;
    for (var j=0;j<text_remove;j++)
    {
        if (line.includes(text_remove[j]))
        {line_allow=false;}
      }
      if (line_allow){final_text+=line + '\n'};
   }
  document.getElementById('main').innerHTML=final_text;
  </script>

答案 2 :(得分:0)

不像Charlies那么优雅,但是fwiw:

&#13;
&#13;
$('#search').on('click', function () {
    var lines = $("#main").val().split("\n");
    var i = lines.length
    while (i--) {
        if( lines[i].indexOf('300') >-1 || lines[i].indexOf('200') > -1){
            lines.splice(i,1);
        }
    }
    var str = '';
    for (var i = 0; i < lines.length; i++) {
      str += lines[i] + "\n";
    }
    $('#main').val(str);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="search" type="button" value="Run" />
<textarea id="main" style="height:150px;">
  300 300 300
  300 200 300
  100 100 150
</textarea>
&#13;
&#13;
&#13;