javascript - 如何忽略 HTML 匹配中的隐藏对象？

Question

这个问题已经有答案了:

Using jQuery, how do you find only visible elements and leave hidden elements alone? (4 个回答)

已关闭 3 年前。

我正在尝试匹配可见对象的文本，但忽略不可见的文本。顺便说一句，我需要 HTML 代码。

这是我的 codepen .

这是我的 HTML:

<div class="main">
   <div class="a">Hello</div>
   <div class="hid">Hello</div>
   <div class="b">Hello</div>
   <div class="hid2">Hello</div>
   <div class="c">Hello</div>
   <div class="hid3">Hello</div>
   <div class="hid4">Hello</div>
</div>

我的CSS:

.hid, .hid2, .hid3, .hid4{
   display: none;
}

我的 JavaScript:

var regEx = /Hello/g;

var main = $('.main').html();

var matches = main.match(regEx);

console.log(matches);

实际上我想排除不可见元素而不将它们从页面中删除。我想要这些 HTML 代码的结果:

<div class="a">Hello</div>
<div class="b">Hello</div>
<div class="c">Hello</div>

我不想删除隐藏的对象，因为我将以交互方式使用它们。我只是想将他们排除在比赛之外。我们可以使用 jQuery。

从现在开始谢谢你。

Answer 1

您可以尝试使用 :visible 选择器，例如 $('.main div:visible')

var visible = $('.main div:visible').map((_,i) => i.outerHTML).get();
console.log(visible);

.hid, .hid2, .hid3, .hid4{
   display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
   <div class="a">Hello</div>
   <div class="hid">Hello</div>
   <div class="b">Hello</div>
   <div class="hid2">Hello</div>
   <div class="c">Hello</div>
   <div class="hid3">Hello</div>
   <div class="hid4">Hello</div>
</div>