html Part of variable change fontsize and font background

Question

Hello!

I have an autogenerated text which is always changing but always contains a "Q+4 digits number".

<style>
                .metarrovid {
                  color: #000000;
                  position: absolute;
                  z-index: 8;
                  display: block;
                  font-weight: bold;
                  left: -1250px;
                  top: 315px;
                  font-family: arial;
                  font-size: 30px;
                  max-width: 700px;
                }
</style>
<?php

    $text=file_get_contents('http://tgftp.nws.noaa.gov/data/observations/metar/stations/LHBP.TXT');
    $metar = $text;
    $metarrovid = substr($metar,16,10000);
    echo '<div class="metarrovid">', "MET REPORT" .$metarrovid,'</div>';
?>

It looks like this:

My question is how can I do that (in this example:"Q1017") be bigger and have yellow background like this:

I want it to look like this (just illustration):

You can parse this text using JS and find required string or patter (use regex). After this, you can add some styles to this part, or better, wrap into the element with css class, that have your styles. Those solutions are not elegant, but should work. Implementation of this solution you can find here https://stackoverflow.com/questions/13780784/jquery-find-and-change-style-of-a-string — Kamil Naja, Aug 21 '18 at 08:03

score 1 · Accepted Answer · answered Aug 21 '18 at 08:10

I can use javascript make it!

<script>    
window.onload = function() { 
    var domText = document.querySelector("body").innerHTML; 
    document.querySelector("body").innerHTML = domText.replace(/(.)(Q\d{4})(.)/, "$1<span style='font-size:24px;color:red;'>$2</span>$3") 
}
</script>

You must select the dom witch you want to change. document.querySelector("body") while replace all the text in body tag.

html Part of variable change fontsize and font background

1 Answers1