JSFiddle - React, Tailwind, and code Playground

by xinyiiilin

HTML

<div class="container">
    <script>
        $(document).ready(function () {
        $(function () {
            $("#sidebar").click(function () {
            $("#page").toggleClass("col-8 px-0");
            $("#main-nav").toggleClass("nav-text");
            });
        });
        });
    </script>
    <style>
        nav.navbar #mega-menu-wrap-primary {
          background: transparent;
        }
        nav.navbar #mega-menu-wrap-primary a {
          color: #121212 !important;
        }
    </style>
    <div id="su-post-2406" class="mb-5 su-post post-6 col-12 col-md-4">

        <div class="su-post-cover-container">
            <a class="su-post-thumbnail"
                href="https://books.daai.site/2020/03/17/%e7%a6%8f%e7%88%be%e6%91%a9%e6%b2%99%e6%8b%be%e9%81%ba%ef%bc%9a%e6%ad%90%e7%be%8e%e7%9a%84%e5%8f%b0%e7%81%a3%e5%88%9d%e9%ab%94%e9%a9%971622-1895/"><img
                    width="350" height="165"
                    src="https://books.daai.site/wp-content/uploads/sites/4/2020/03/dr_720-350x165.jpg"
                    class="img-fluid wp-post-image" alt=""
                    srcset="https://books.daai.site/wp-content/uploads/sites/4/2020/03/dr_720-350x165.jpg
                    350w,
                    https://books.daai.site/wp-content/uploads/sites/4/2020/03/dr_720-300x142.jpg
                    300w,
                    https://books.daai.site/wp-content/uploads/sites/4/2020/03/dr_720-500x236.jpg
                    500w,
                    https://books.daai.site/wp-content/uploads/sites/4/2020/03/dr_720-150x71.jpg
                    150w,
                    https://books.daai.site/wp-content/uploads/sites/4/2020/03/dr_720.jpg
                    720w" sizes="(max-width: 350px) 100vw, 350px"></a>
        </div>

        <h2 class="su-post-title h4 mt-2"><a
               ...

CSS

.highlight{
            font-weight:bold;
            color:green !important;
}

JavaScript

var rex = new RegExp("(?<!</?[^>]*|&[^;]*)([A-Za-z0-9\-])", "gim");
$("div").each(function(){
    var $this = $(this);
    var content = $this.html();
    //console.log(content);
    $this.html(content.replace(rex, "<span class = 'highlight'>$1</span>"));
});