时间戳

首页 > 解决方案 > html 部分变量改变字体大小和字体背景

html - html 部分变量改变字体大小和字体背景

问题描述

你好！

我有一个自动生成的文本，它总是在变化，但总是包含一个“Q+4 位数字”。

<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>';
?>

它看起来像这样：

在此处输入图像描述

我的问题是我怎样才能做到这一点（在这个例子中：“Q1017”）更大并且有这样的黄色背景：

我希望它看起来像这样（只是说明）：

在此处输入图像描述

标签： htmlcssregex

解决方案

我可以使用 javascript 制作它！

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

您必须选择要更改的 dom 女巫。document.querySelector("body") 同时替换 body 标签中的所有文本。

推荐阅读