在行中查找某些文本，然后隐藏这些行答案

【问题标题】：find certain text in lines, then hide those lines在行中查找某些文本，然后隐藏这些行
【发布时间】：2016-06-27 21:27:20
【问题描述】：

我正在运行一个浏览每一行的 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

【问题讨论】：

textarea中的文字不能隐藏，但可以删除！
是的，可以删除它
或者如果我需要使用 div 而不是 textarea 也可以
也使if 没有意义......不要在$() 和if($()) 中包装任意字符串，除非您传入会引发错误的垃圾，否则它们将始终是真实的。 lines 也是一个数组...不能在数组上使用css()

标签： javascript jquery css

【解决方案1】：

您需要替换整个 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>

【讨论】：

所以理论上，如果我想反其道而行之，只显示 200 或 300 的值，那么我会将 -1 更改为 +1？
yes... 可以将任何你想要的逻辑放入过滤器函数中并返回一个布尔值

【解决方案2】：

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

【讨论】：

【解决方案3】：

不像查理斯那么优雅，但fwiw：

$('#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);
});

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

【讨论】：