I currently have a regex function that finds all matches of a word within html on a page and replaces that with a string that includes html(essentially places a span around it with a highlight CSS class).
It is working as intended but is missing most matches in some areas and I can't point out why it would miss matches in other areas considering there is no difference in the html. I will bold which word matches it would hit in a scenario and which it wouldn't I would leave italicized.
Lets say the word given that I want matched in the formula is "income"
<p> This is the **income**of your **income** welcome to the **income**</p>
<p> Loren ipsum loren ipsum Loren ipsum loren ipsum Loren ipsum loren income Loren ipsum loren ipsum *income* Loren ipsum loren ipsum Loren ipsum loren ipsum Loren ipsum loren ipsum **income**. </p>
sometimes it will match with an instance of the word 'income' in one page refresh and others it will not. Very strange.
Here is the listed Regex that I am using below
const regex = new RegExp('<(?!th)[^>]*>[^<]*(\\b' + wordToMatch + '\\b)', 'gi');
Currently its doing what is intended which is
- ignoring any inline text within a th tag
- capturing only the whole word
- capturing more than one instance of the word (but missing some instances)
- capturing only text in-between tags
- case insensitive
If anyone has any theories I am open to hear them! and yes I know there are better ways than using Regex.
function highlight() {
var lastSearch = "The income";
var inputText = $('.component.content');
if (lastSearch) {
lastSearch = lastSearch.split(' ');
for (var index in lastSearch) {
var MatchedWord = lastSearch[index];
if (MatchedWord.length > 2 && inputText && inputText.length > 0) {
var innerHTML = inputText[0].innerHTML;
var doesTermExist = innerHTML.toLowerCase().indexOf(MatchedWord.toLowerCase());
if (doesTermExist >= 0) {
const regex = new RegExp('<(?!th)[^>]*?>[^<]*(\\b' + MatchedWord + '\\b)', 'gi');
$('.component.content').first().html($('.component.content').first().html().replace(regex,
function(match, capture) {
return match.substr(0, match.length - capture.length) + "<span class='document-highlight'>" + capture + "</span>"
}));
}
}
}
}
}
window.addEventListener('DOMContentLoaded', highlight);.document-highlight {
font-weight: 700;
background-color: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../JS_Sitecore_ScratchPAge/eroc.css">
<link/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
<html>
<body>
<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">WET FUNDING STATES: Funds are sent on date of Closing or date of disbursement<br />
</th>
</tr>
</thead>
<tbody>
<tr class="data">
<td><span style="text-align: center;">Alabama</span></td>
<td> <span style="text-align: center;">Nebraska</span></td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Arkansas</span></td>
<td><span style="text-align: center;">New Hampshire</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Colorado</span></td>
<td><span style="text-align: center;">New Jersey</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Connecticut</span></td>
<td><span style="text-align: center;">New Mexico (purchases)</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Delaware</span></td>
<td><span style="text-align: center;">New York</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">District of Columbia</span></td>
<td><span style="text-align: center;">North Carolina</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Florida</span></td>
<td> <span style="text-align: center;">North Dakota</span></td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Georgia</span></td>
<td><span style="text-align: center;">Ohio</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Illinois</span></td>
<td><span style="text-align: center;">Oklahoma</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Indiana</span></td>
<td><span style="text-align: center;">Pennsylvania</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Iowa</span></td>
<td><span style="text-align: center;">Rhode Island</span></td>
</tr>
<tr class="data">
<th>income income the welcome to the jungle</th>
<td> <span style="text-align: center;">Kansas</span></td>
<td><span style="text-align: center;">South Carolina</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Kentucky</span></td>
<td><span style="text-align: center;">South Dakota</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Louisiana</span></td>
<td><span style="text-align: center;">The</span> </td>
<td><span style="text-align: center;">further</span> </td>
<td><span style="text-align: center;">th</span> </td>
<td><span style="text-align: center;">furthe</span> </td>
<td><span style="text-align: center;">Further</span> </td>
<td><span style="text-align: center;">the further</span> </td>
<td><span style="text-align: center;">Tennessee</span> </td>
<td><span style="text-align: center;">Tennessee</span> </td>
</tr>
<tr class="data">
<td><span style="text-align: center;">Maine</span> </td>
<td><span style="text-align: center;">Utah</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Maryland</span></td>
<td><span style="text-align: center;">Texas</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Massachusetts</span></td>
<td><span style="text-align: center;">Vermont</span> </td>
</tr>
<tr class="data">
<td><span style="text-align: center;">Michigan</span> </td>
<td><span style="text-align: center;">Virginia</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Minnesota</span></td>
<td> <span style="text-align: center;">West Virginia</span></td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Mississippi</span></td>
<td><span style="text-align: center;">Wisconsin</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Missouri</span></td>
<td><span style="text-align: center;">Wyoming</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Montana</span></td>
<td> </td>
<td>
<p>Note that while the Freddie Mac guidance referenced below refers to the selling guide section 5307.1 in relation to securities accounts (stocks, bonds, mutual funds) and depository account (checking/savings), the Fannie Mae guidance is
not written in their selling guide. Only a handful of lenders have received permission to use this income source from Fannie Mae, and it can be a useful tool to qualify the borrower both as a main stream of income or as supplemental
income to solve for minor DTI restructures. This is separate from the Fannie Mae guidelines surrounding employment-related assets and IRA distributions found in section B3-3.1-09.
</p>
</td>
<td>
<p>Assets as income involves reviewing the balance in the borrowers various asset accounts and using a calculation to determine a monthly income that can be used to qualify the loan.</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<table class="table-complex primary" style="text-align: center;">
<thead>
<tr class="primary-type">
<th colspan="2">DRY FUNDING STATES: Funds are sent when the Wire Team receives a funding request from Title/Escrow<br />
</th>
</tr>
</thead>
<tbody>
<tr class="data">
<td><span style="text-align: center;">Alaska</span></td>
<td>Nevada</td>
</tr>
<tr class="data">
<td>Arizona</td>
<td>New Mexico (refinances)</td>
</tr>
<tr class="data">
<td>California</td>
<td>Oregon</td>
<td>The Further</td>
</tr>
<tr class="data">
<td>Idaho</td>
<td>Washington</td>
</tr>
<tr class="data">
<td>Hawaii</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="component content">
<div class="component-content">
</div>
</div>
<div class="component link">
<div class="component-content">
</body>
</html>
