Just to build on top of the code from the previous post. This time, there is a page on a Web Forms application with a text that needs to be eliminated, but we no longer have the ability to re-compile. Fortunately, the change is cosmetic so we can resort to using plain vanilla JavaScript to solve this.
Again, the provided HTML, although it was from a real legacy application, it has been cut short so it’s not too distracting. What we need to do here is to remove Obsolete Service: and its content from the list of current services as displayed below:
This part of HTML was generated dynamically by a Web Forms and at this point recompiling is not an option. So what we wanted to do is to let the application still generates the page and we intercept the result with JavaScript and modify it after the fact.
<table>
<tr bgcolor="#e4f4ff">
<td valign="top">
<span id="lblservicemsg"><b>Current Services:</b></span>
</td>
<td valign="top">
<span id="lblCurrentServices" class="formtxt"><strong>Mobile: </strong> MobileCarrier <br><strong>Internet:
</strong> Internet Provider <br><strong>Obsolete Service: </strong> ABN39482 <br><strong>Messaging: </strong>
iMessage<br></span>
</td>
<td valign="top">
<input type="submit" name="btnAddServices" value="Edit Services"
onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnAddServices", "", true, "", "", false, false))"
id="btnAddServices" class="formbtn" style="width:176px;">
</td>
</tr>
</table>
Studying the pattern above, it looks like the Obsolete Service: begins with a <strong> tag and ends with a <br>. However, it’s also known that between the closing </strong> tag and <br>, there could be more than one data point. So we can do a search using JavaScript to match the text Obsolete Service: and we need to use Regular Expression to match all entries between the closing </strong> tag and <br>.
Using the same logic of JavaScript to find the text in the previous post, we just need to grab the HTML text using innerHTML. Then we need to remove the instance of Obsolete Service using Regular Expression for the pattern matching.
We can use RegExr: Learn, Build, & Test RegEx website to try to match the pattern we’re looking for. And from trial and error, we found that to include all strings until the next occurence of <br> is by using (.+?)<br>. So the final pattern to use to capture what we want is <strong>Obsolete Service:(.+?)<br>.
At this point, we can copy the pattern and paste it to our JavaScript code by substituting it with the variable searchText as such: `<strong>${searchText}(.+?)<br>` and assign the value to a constant regString. So whenever the script finds a match of this pattern, it will replace it with an empty string.
const searchText = 'Obsolete Services:'
document.addEventListener('DOMContentLoaded', function () {
const spanTags = document.querySelectorAll('span')
for (let i=0; i<spanTags.length; i++) {
if (spanTags[i].innerHTML == searchText) {
const elementId = spanTags[i].id
// Get innerHTML
const element = document.getElementById(elementId)
const getInnerHTML = element.innerHTML
// Use Regular Expression
const regString = `<strong>${searchText}(.+?)<br>`
let regex = new RegExp(regString)
const replaceText = getInnerHTML.replace(regex, '')
element.innerHTML = replaceText
}
}
})
That’s it. Now, when the page is loaded, Obsolete Service is removed from the page.
Before
After
Leave a Reply