非列表怎么写搜索模糊匹配

Question

小白一个 想问下非列表怎么写搜索模糊匹配 例如 尽量不用jquery

              <div class="am-tab-panel" id="tab-4-5">
                <div class="am-g">
                  <div class="am-u-md-3">
                    <a href="../assets/src/真实的地球.rar" style="background-image: url('../assets/images/example/0216277pre5prkdm6jmepm.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">真实的地球<br>(点击图片下载)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(点击图片下载)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(点击图片下载)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(点击图片下载)</p>
                  </div>
                </div>
              </div>

搜索p标签里面的字，结果只显示对应的那个div ，其他结果隐藏

Answer 1

根据题主的代码，改了下：

function  myfunction(){
      var p , i , inputss;
      p = document.getElementsByTagName('p');
      inputss = document.getElementById('ss');
      var reg=RegExp(inputss.value,'gu');
      for(i=0 ; i<p.length; i++){
        if(p[i].innerHTML.match(reg)){
          p[i].parentNode.style.display="";
        }else{
          p[i].parentNode.style.display="none";

        }
      }
    }

原来的代码：

let frag=document.createElement('div')
frag.innerHTML=   `              <div class="am-tab-panel" id="tab-4-5">
                <div class="am-g">
                  <div class="am-u-md-3">
                    <a href="../assets/src/真实的地球.rar" style="background-image: url('../assets/images/example/0216277pre5prkdm6jmepm.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">真实的地球<br>(点击图片下载)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(点击图片下载)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(点击图片下载)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(点击图片下载)</p>
                  </div>
                </div>
              </div>`;

function getMatchedList (keyword) {
    let lists=frag.getElementsByClassName('am-u-md-3'),
    reg=new RegExp(keyword, 'gu');    
    return Array.from(lists).filter((list,index)=>{
        return list.getElementsByTagName('p')[0].textContent.match(reg);
    });
}

getMatchedList('真实');//[div.am-u-md-3]
getMatchedList('JS198');//[div.am-u-md-3, div.am-u-md-3, div.am-u-md-3]

Answer 2

不知道你说的不用jQuery是什么意思？用原生的js，如果有更方便的jQuery为什么不用？具体思路就是：
1.遍历am-u-md-3获取里面的p元素的innerText
2.用正则匹配，看是否匹配，如果匹配，设置div的display为none
3.如果不匹配，则继续