时间戳

首页 > 解决方案 > 使用 javascipt 查找相关的 HTML 标签

javascript - 使用 javascipt 查找相关的 HTML 标签

问题描述

我想用 javascipt 找到相关的 HTML 标签。我用正则表达式尝试了一些想法，但没有成功。

示例 html：

<span>Hello <span>World</span></span><span>How are you</span>

我想找到

<span>Hello <span>World</span></span>

和

<span>How are you</span>

但不是全部而不是

<span>Hello <span>World</span>

我的尝试：

/<(\w+)(?:"[^"]*"|'[^']*'|[^'">])*>(.*)<\/\1>/gmi

和

/<(\w+)(?:"[^"]*"|'[^']*'|[^'">])*>(.*?)<\/\1>/gmi

其他人认为我不记得的观点。

标签： javascripthtmlregex

解决方案

这取决于相关标签的含义。如果您只想通过标签名称提取元素，那么您可以考虑使用document.getElementsByTagNamefunction 或querySelector. 但是要实现您在上面的示例中展示的内容，您只需过滤容器的子项即可。

看一下代码示例：

// Example 1: only spans
const EXAMPLE_1 = document.getElementById('example1')

let relatedA = [...EXAMPLE_1.children].filter(x => x.tagName.toUpperCase() === 'SPAN')
console.log(relatedA.map(x => x.outerHTML))

// Example 2: only A and marked as related
const EXAMPLE_2 = document.getElementById('example2')

let relatedB = [...EXAMPLE_2.querySelectorAll('a, .related')]
console.log(relatedB.map(x => x.outerHTML))
<div id="example1">
    <span>Hello <span>World</span></span>
    <span>How are you?</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptas perferendis enim dolores ad reprehenderit aliquam id ut doloremque aut laboriosam, consequuntur labore in amet cupiditate? Voluptatibus, ipsa beatae aliquid.</p>
    <span>I'm fine, thanks!</span>
</div>

<div id="example2">
    <a href="#">A</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam distinctio alias vel quo consectetur in rem eum, aut animi quidem at molestias esse architecto quisquam, itaque sit velit eligendi eius!</p>
    <a href="#">B</a>
    <p class="related">C</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni aspernatur libero aliquid maiores reiciendis, quam culpa, mollitia harum molestiae, quos aut. Laborum molestias aliquid ipsum. Dolorum impedit expedita, sunt odio!</p>
    <a href="#">D</a>
    <a href="#">E</a>
</div>

推荐阅读