{"id":69033,"date":"2025-08-10T03:01:00","date_gmt":"2025-08-09T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69033"},"modified":"2025-08-09T21:16:26","modified_gmt":"2025-08-09T11:16:26","slug":"write-like-you-render-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/write-like-you-render-primer-tutorial\/","title":{"rendered":"Write Like You Render Primer Tutorial"},"content":{"rendered":"
\"Write<\/a>

Write Like You Render Primer Tutorial<\/p><\/div>\n

The recent goings on with the YouTube Style SubRip Subtitles Button Tutorial<\/a> thread of blog postings, uncovering for us the wonders of the great DOMParser<\/a> Web API, has inspired us to write, again<\/a>, a new HTML validator web application, just on the clientside of the “webpage equation”.<\/p>\n

If you are into the creation of HTML on a Content Management System such as WordPress<\/a>, here, with this blog, there is some forgiveness regarding what you construct as your content HTML and allowing that through to webpage content. But perhaps you’d …<\/p>\n

\nLike to write the HTML as the web browser sees it, and then renders it\n<\/p><\/blockquote>\n

It mattered, a lot, in that project above, because for that project’s “collaboration purposes”, in the code, we wanted to know that HTML content in the caption data relevant “shadowing” textarea or textbox user interfacing elements would match any HTML element “innerHTML” or “outerHTML” or “innerText” reference later accessed. Any missing double quote mattered in this scenario. But, of course, it would be good as general practice for a Content Management System produced set of HTML to get close to that ideal HTML the web browser syntax in it’s form and format.<\/p>\n

Which brings us to today’s …<\/p>\n


\nWrite Like You Render
\n<\/code><\/p>\n

… web application HTML validator “first draft” write_like_you_render.html<\/a> with the starring codelines …<\/p>\n


\n var newh=new DOMParser().parseFromString(inhtml, \"text\/html\"); \/\/ thanks to https:\/\/stackoverflow.com\/questions\/57074776\/parse-html-string-to-dom-and-convert-it-back-to-string<\/a>
\n var newht=('' + newh.body.innerHTML);
\n<\/code><\/p>\n

… you can try for yourself here<\/a> or below …<\/p>\n