正则表达式通过html过滤以查找单词,但不在表格标题内

unhi4e5o  于 2022-12-16  发布在  其他
关注(0)|答案(2)|浏览(101)

所以我尝试修改一个regex函数,这个函数目前搜索一个单词并在找到时返回它。不幸的是,同一个单词有时可能存在于一个表标题(<th>标记)中,在这种情况下我不想匹配。
这是JavaScript正则表达式:(lastCoveoSearch是传入的字的变量)
原始regex函数我甚至在表头中找到了单词:

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

8gsdolmq1#

不确定,但这似乎工作。它非常类似于你的,只需要转义那里的\时,使用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)
bpsygsoo

bpsygsoo2#

这里不需要正则表达式,只要选择<td>元素,并将它们的innerTextquery字符串匹配即可。

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>

相关问题