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>

        <div id="dsidx-property-types"><strong>Property Type(s)</strong>: Residential, Single Family Detached</div>
    </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

/**
	 * Check if dsidxpress-details
	 * Add some microdata markup
	 *
	 */
	if (
	$('div#dsidx-property-types:contains("Residential")').length > 0) {
	    if (
	    $('.dsidxpress').length && $('.dsidxpress-details').length) {
	        var cm = ",";
	        var sp = " ";
	        $('.h1')
	            .wrap('<div itemscope itemtype="http://schema.org/Residence"/>')
	            .wrap('<div itemscope itemtype="http://schema.org/PostalAddress" />');
            $('h1').each(function () {
	            var myText = $(this).text();
	            var arr = myText.split(",");
	            var arrr = arr[2].split(sp);
	            $(this).html('<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 class="postal-code" itemprop="postalCode">' + arrr[2] + '</span> ' + arrr[3] + ' ' + arrr[4] + ' ' + arrr[5]);
	        });
	    }
	}