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

Это выглядит так:

Html Часть переменной, изменяющая размер шрифта и фон шрифта

Мой вопрос в том, как я могу сделать это (в этом примере: «Q1017») больше и иметь желтый фон, как это:

Я хочу, чтобы это выглядело так (просто иллюстрация):

Html Часть переменной, изменяющая размер шрифта и фон шрифта

Вы можете проанализировать этот текст с помощью JS и найти нужную строку или шаблон (используйте регулярное выражение). После этого вы можете добавить несколько стилей в эту часть или, лучше, обернуть их в элемент <span> с помощью класса css, в котором есть ваши стили. Эти решения не изящны, но должны работать. Реализацию этого решения вы можете найти здесь stackoverflow.com/questions/13780784/…

— 21.08.2018 10:03

html css regex

21.08.2018 10:00

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я могу использовать 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>

Вы должны выбрать дом-ведьму, которую хотите изменить. document.querySelector ("body") при замене всего текста в теге body.

21.08.2018 10:10