正则表达式通过html过滤以查找单词但不在表头内部

Question

所以我试图改变我目前搜索一个词并在找到时返回它的正则表达式函数。 不幸的是，同一个词有时可能存在于表头（ <th>标记）中，在这种情况下我不想匹配。

这是用于 JavaScript Regex 的：（ lastCoveoSearch是传入单词的变量）

我原来的正则表达式函数甚至在表头中也能找到单词：

new RegExp('>[^<]*('+lastCoveoSearch+')', "ig")

我正在测试的一个似乎正在对正则表达式进行测试，但没有使用我的代码，其中忽略了表头标签及其中的属性：

new RegExp('<(?!th)\b[^>]*>[^<]*('+lastCoveoSearch+')', "ig")

有什么地方我要去错了吗？ 我附上了一个 html 片段作为我正在测试该功能的页面示例。

 <div class="component title"> <div class="component-content"> <h1 class="field-title">Wet vs. Dry Funding States</h1> </div> </div> <div class="component content"> <div class="component-content"> <div class="field-content"><div class="row"> <div class="col-12 container"> <h2></h2> </div> </div> <table class="table-complex primary" style="text-align: center;"> <thead> <tr class="primary-type"> <th colspan="2">This is the table header that I do not want to be matched<br /> </th> </tr> </thead> <tbody> <tr class="data"> <td><span style="text-align: center;">Alabama</span></td> <td>&nbsp;<span style="text-align: center;">Nebraska</span></td> </tr> <tr class="data"> <td>&nbsp;<span style="text-align: center;">Arkansas</span></td> <td><span style="text-align: center;">New Hampshire</span>&nbsp;</td> </tr> <tr class="data"> <td>&nbsp;<span style="text-align: center;">Colorado</span></td> <td><span style="text-align: center;">New Jersey</span>&nbsp;</td> </tr>

Answer 1

不确定，但这似乎有效。 它与您的非常相似，只需要在使用new RegExp('', '')语法时转义那里的\ 。

 var html = ` <th>hi 13 hello</th> <td>good hello 12</td> `; var word = "hello" var reg = new RegExp('<(?.th)\\b,*>[^<]*(' + word + ')'; "ig"). console.log(reg) var matches = reg.exec(html) console.log(matches)

Answer 2

这里不需要正则表达式。 只需选择<td>元素并将其innerText与query字符串匹配。

 const results = document.querySelector('#results'); const doesMatch = (text, query) => query.length > 0 && text.toLowerCase().includes(query); const highlight = (td, query) => { td.classList.toggle('highlight', doesMatch(td.innerText, query)); }; const handleSearch = (e) => { const query = e.target.value.trim().toLowerCase(); results.querySelectorAll('td').forEach(td => highlight(td, query)); }; document.querySelector('#query').addEventListener('input', handleSearch);

 .highlight { background: yellow; }

 <label>Search</label> <input id="query" type="search" placeholder="Search for a word..." autocomplete="off"/> <hr /> <table id="results"> <thead> <tr> <th colspan="2">List of States</th> </tr> </thead> <tbody> <tr> <td>Alabama</td> <td>Montana</td> </tr> <tr> <td>Alaska</td> <td>Nebraska</td> </tr> <tr> <td>Arizona</td> <td>Nevada</td> </tr> <tr> <td>Arkansas</td> <td>New Hampshire</td> </tr> <tr> <td>California</td> <td>New Jersey</td> </tr> <tr> <td>Colorado</td> <td>New Mexico</td> </tr> <tr> <td>Connecticut</td> <td>New York</td> </tr> <tr> <td>Delaware</td> <td>North Carolina</td> </tr> <tr> <td>Florida</td> <td>North Dakota</td> </tr> <tr> <td>Georgia</td> <td>Ohio</td> </tr> <tr> <td>Hawaii</td> <td>Oklahoma</td> </tr> <tr> <td>Idaho</td> <td>Oregon</td> </tr> <tr> <td>Illinois</td> <td>Pennsylvania</td> </tr> <tr> <td>Indiana</td> <td>Rhode Island</td> </tr> <tr> <td>Iowa</td> <td>South Carolina</td> </tr> <tr> <td>Kansas</td> <td>South Dakota</td> </tr> <tr> <td>Kentucky</td> <td>Tennessee</td> </tr> <tr> <td>Louisiana</td> <td>Texas</td> </tr> <tr> <td>Maine</td> <td>Utah</td> </tr> <tr> <td>Maryland</td> <td>Vermont</td> </tr> <tr> <td>Massachusetts</td> <td>Virginia</td> </tr> <tr> <td>Michigan</td> <td>Washington</td> </tr> <tr> <td>Minnesota</td> <td>West Virginia</td> </tr> <tr> <td>Mississippi</td> <td>Wisconsin</td> </tr> <tr> <td>Missouri</td> <td>Wyoming</td> </tr> </tbody> </table>