JSFiddle - React, Tailwind, and code Playground

by David England

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- IDX SEO settings -->
        <meta name="keywords" content="HUNTSVILLE real estate agents,HUNTSVILLE homes,AL,35811,Madison,HIGH MOUNTAIN ESTATES,Huntsville East "
        />
        <meta name="description" content="HUNTSVILLE real estate agents and broker for HIGH MOUNTAIN ESTATES in the Huntsville East community located in Madison county of HUNTSVILLE, AL  35811."
        />
        <!-- /IDX SEO settings -->
    </head>
    
    <body class="page dsidxpress dsidxpress-details wpcasa boxed layout-three">
         <h1 class="post-title title">
	3002 High Mountain Road, HUNTSVILLE, AL 35811 (MLS # 842762)			    </h1>

    </body>

</html>

CSS

body {
    padding:50px;
}
div {
    border:2px solid #bbb;
    background-color:#eee;
    padding:10px;
    margin:10px auto;
}
span {
    display:inline-block;
    width:auto;
    font:bold 12px Arial, Sans-Serif;
    color:white;
    padding:5px 10px;
    background-color:black;
}
.street-address {
    background-color:red
}
.locality {
    background-color:blue
}
.region {
    background-color:green
}

JavaScript

$('h1').each(function () {
    myText = $(this).text();
    var arr = myText.split(",");
    var arrr = arr[2].split(" ");
    $(this).after("<div itemscope itemtype=\"http://schema.org/Residence\"><span class=\"street-address\" itemprop=\"streetAddress\">" + arr[0] + "</span><span class=\"locality\" itemprop=\"addressLocality\">" + arr[1] + "</span>, <span class=\"region\" itemprop=\"addressRegion\">" + arrr[1] + "</span>  <span itemprop=\"addressRegion\">" + arrr[2] + "</span></div>");
});