Develop Reference

Specific Webpage Word-Counter Needed with a Logical Semantic Twist and an exact placeholder

Context
The following question has NOT already an answer in Stack Overflow.
Based on many broad unspecific undetailed and ambiguous questions and many broader answers like here I have created a very specific and very precisely formulated question that, unlike the other broader questions on this site, have no space for ambiguity.
Problem
This question narrows down the quest for a logical word-count in a semantically different way and differs thus from other questions as well as it allows for precise and useful answer with a practical implemenatation anywhere on the page where one wants to count and or to show the counter after a preset delay, that relieves the code from causing any overhead while the words are still being fetched.
You are free to fork into the link above or the many many other works already wandering around elsewhere, and tweak it for your specific answer of this question.
You are free to use jQuery library 3.6.0 if you wish so make one with zero-dependencies on jQuery.
Starting point
Given the following HTML syntax, I would like to count the number of useful words in the <article> html element.
These could be a word starting from two characters up. The meaning of the English word a or o is nullified and not counted as a meaningful word! Only words from two characters up, need to be counted to reflect substance and valuable contents.
Include words in normal html tags like <p> <h1> <h2> <h3> <em> <i> <strong> <mark> or <td>.
Only elements that are <article> and inside a <section> or a <hgroup> should be counted. All else should be skipped.
Dashed-words can count as one word: the space around the words is the defining factor.
<article>
<hgroup>
<hr>word word word word word</h1>
</hgroup>
<something>Ignored Ignored</something>
<section>
<h2>word word word word word</h2>
<p>word word</p>
<p><em>Word Word word</em></p>
<p><i>Word Word word</i></p>
<p>word word</p>
<p><strong>Word Word word</strong></p>
<p><mark>Word Word word</mark></p>
<p>word word</p>
</section>
<something>Ignored Ignored</something>
<section>
<h3>word word word word word</h3>
<ul>
<li>word word word word</li>
<li>word word word word</li>
<li>word word word word</li>
</ul>
<p>word word</p>
<p>word word</p>
<table>...<td>Maandag</td><td>Dinsdag</td>...
</table>
<p>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</p>
</section>
</article>
Placement
The numer of words should then be written inside a prechosen html element, say for example <wordcount>...</wordcount>.
In the example above, the correct word count should be: ???
(15 for the three headings, 10 in unstyled paragraphs, 12 in styled elements and 12 in list items and 2 in table data.)
<wordcount>51</wordcount>

Regex match group based on common groupings

Good evening,
I'm trying to group the below text so it will allow me to replace with a <ol>$1</ol>. Seems simple enough but I can't master the greediness.
Sample text (I'm aware its a repeated list, I copy+pasted for an example to show separation):
<h4>Properties</h4>
<dl><dd> Oxygen is gas at standard temperature and pressure.</dd></dl>
<h4>Testing for Oxygen</h4>
<li>A1</li>
<li>A2</li>
<li>A3</li>
<h4>Other Properties</h4>
<dl><dd> Oxygen is gas at standard temperature and pressure.</dd></dl>
<h4>Testing for Something Else</h4>
<li>B1</li>
<li>B2</li>
<li>B3</li>
The last entry can be either end-of-string or preceding another '\n'
I would like the 2 matches to be
<li>A1</li>
<li>A2</li>
<li>A3</li>
and
<li>B1</li>
<li>B2</li>
<li>B3</li>
So I can wrap in some <ol>...</ol>, simple enough. [There are other un-order lists on the page so using a temporary <lio> tag in my actual code then replacing with <li> at the end of the function].
I've gotten to the point of the below but its too greedy and starting at the first (A1's) <li> and stopping at the last (B3's) </li>
Current match:
<li>A1</li>
<li>A2</li>
<li>A3</li>
<h4>Other Properties</h4>
<dl><dd> Oxygen is gas at standard temperature and pressure.</dd></dl>
<h4>Testing for Something Else</h4>
<li>B1</li>
<li>B2</li>
<li>B3</li>
Current search string: (?!\<\/li\>.)*(\<li\>[^¬]+(\<\/li\>))(?!\<\/li\>) which captures the entire thing on Full Match (groups are a bit squiffy)
Doing this in JavaScript.
Any advice?
Thank you,

Got it licked
This does it:
(\<lio\>[\w\W]*?)\n+(\<[^l]|\0|\w|¬)

JavaScript Regular Expression - grouping, one-or-more characters, excluding set character strings

I'm trying to match and replace broken HTML using a regex, but I've done a couple of full circles with grouping and lookbacks and quantifiers. I'm struggling to match every scenario.
JavaScript, because the issue is triggered in a Web client browser HTML editor.
The broken HTML is specific - any text between a closing LI and the closing list UL or OL, that is not properly formed as a list item.
For instance, this piece here, from the greater example underneath:
</li>
bbb<strong>bbbb</strong><strong>bbb <span style="text-decoration: underline;"><em>bbbbb</em></span></strong>=0==
</ul>
Here is the full example of where the issue could exist:
<ul>
<li>1111</li>
<li>Could be anything here</li>
<li>aaaa</li>
bbb<strong>bbbb</strong><strong>bbb <span style="text-decoration: underline;"><em>bbbbb</em></span></strong>=0==
</ul>
<ol>
<li>more?<li>
<li>echo</li>
</ol>
This is what I intend the HTML to look like using a match + replace.
<ul>
<li>1111</li>
<li>Could be anything here</li>
<li>aaaabbb<strong>bbbb</strong><strong>bbb <span style="text-decoration: underline;"><em>bbbbb</em></span></strong>=0==
</ul>
<ol>
<li>more?<li>
<li>echo</li>
</ol>
A few expressions I've tried are the following, but depending on these (or slight variations), I'm matching too much or not correctly or something:
/<\/li>.*?<\/[ou]l>/mig
/<\/li>([\s\n]*[\w!\.?;,<:>&\\\-\{\}\[\]\(\)~#'"=/]+[\s\n]*)+<\/[ou]l>/mig
/<\/li>([\s\n]*[^\s\n]+[\s\n]*)+<\/[ou]l>/i
Searched for a couple of days on and off, no luck.. I realise I'm probably asking something answered hundreds of times before.

it's recommended to use a dom based approach to pocessing html
using jQuery:
$('ul>:not(li)').wrapAll('<li></li>');

how to convert unordered list( UL, LI) to continuous string

I want to convert following html code into continuous string using jquery/javascript.
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
This is the html placed inside the textarea(with id "description") when I read these contains using $('#description').text(), I get this description as
one
two
three
instead I would like to get it as "one two three" i.e. continuous, any suggestion?

You need to remove line breaks.
someText = $('#description').text();
someText = someText.replace(/(\r\n|\n|\r)/gm,"");
Or replace them with spaces:
someText = someText.replace(/(\r\n|\n|\r)/gm," ");
--
http://www.textfixer.com/tutorials/javascript-line-breaks.php

You can use regular expression and remove line breaks and white space
var final = $('#description').text().replace(/[\n ]/g, "");

give the same name attribute for all li's. like
<ul>
<li name="common">one</li>
<li name="common">two</li>
<li name="common">three</li>
</ul>
Now you can get all by var text=document.getElementsByName('common'); Append text[i].value upto text.length

Using .text() to select a class but having issues with spaces within the html

$('li.' + $(this).text()).toggle(true);
This code is used to take from a subnav below.
<div class="subNav">
<ul>
<li class="button">sun protective clothing</li>
</ul>
</div>
These are products that will be visible.
<div class="sun-protective-clothing"></div>

You must use JavaScript's replace() function to replace all spaces with dashes. Note using replace(" ", "-") like this will only replace the first instance of a space in the string. you must use a RegEx with the global search to replace all instances; such as / /g
$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

you need to replace the spaces with dashes. Try
$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

I would recommend no using the text inside the li and do something like this:
<div class="subNav">
<ul>
<li class="button" target="sun-protective-clothing">sun protective clothing</li>
</ul>
</div>
and:
$('.' + $(this).attr("target")).toggle(true);
This way you can put whatever you want inside the li, and not have it affect your logic.