JSFiddle - React, Tailwind, and code Playground

HTML

<div id="input">

    <p>Rules in 2013. The rules have not changed since 1970)</p>
    
    <p>At 1800 there will be dinner!</p>
    <p>right before 1800 you should be queueing up!</p>
    <p>at 2300 it's light out!</p>
    <p>tomorrow at 800 we will be serving breakfast, but only until 845!</p>
</div>

<div id="output">
    1800
</div>
<input id="queryword" type="text"></input>

CSS

div {
    padding: 20px;
}

JavaScript

function formatTime(str, p1, offset, s) {
    var hours24 = parseInt(p1.substring(0, p1.length-2));
    var hours = ((hours24 + 11) % 12) + 1;
    var amPm = hours24 > 11 ? 'pm' : 'am';
    var minutes = p1.substring(p1.length-2);

    return hours + ':' + minutes + amPm;
};

var re = /(\d?\d\d\d)/g;

var html = $("#input").html();

html = html.replace(re, formatTime);
    
    
$("#output").html( 1800 );