JSFiddle - React, Tailwind, and code Playground

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

function MyConv(node)
{
	let ignoreTable=['script', 'style'];
	ignoreTable=ignoreTable.reduce((obj, name)=>{
		obj[name]=true;
		return obj;
	}, {});
	
	const nodeList=Array.from(node.childNodes);
	nodeList.forEach((node)=>{
		if(node.nodeType===Node.TEXT_NODE) {
			let fragment=getNewNode(node.textContent);
			let p=node.parentElement;
			p.insertBefore(fragment, node);
			p.removeChild(node);
		} else if(
			node.nodeType===Node.ELEMENT_NODE &&
			!ignoreTable[node.tagName.toLowerCase()]
		) {
			MyConv(node); //繼續檢查子節點
		}
	});
	
	function getNewNode(s) {
		let fragment=document.createDocumentFragment();
		let type=null, tmp='';
		for(let c of s) {
			let x=c.codePointAt();
			let t=32<=x && x<=126?'en':'zh';
			if(t!==type) {
				if(type==='zh') {
					let txt=document.createTextNode(tmp);
					fragment.appendChild(txt);
				} else if(type==='en') {
					let span=document.createElement('span');
					span.className='highlight';
					span.textContent=tmp;
					fragment.appendChild(span);
				}
				type=t;
				tmp='';
			}
			tmp+=c;
		}
		if(tmp.length>0) {
			if(type==='zh') {
				let txt=document.createTextNode(tmp);
				fragment.appendChild(txt);
			} else if(type==='en') {
				let span=document.createElement('span');
				span.className='highlight';
				span.textContent=tmp;
				fragment.appendChild(span);
			}
		}
		return fragment;
	}
}
MyConv(document.querySelector('div[class="container"]'));