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>

JavaScript string: get content of two standing next to each other pieces of content and wrap them together

I'm trying to create a small script that would wrap some parts of text from e.g. <p> tag like this one: <p>... 'displayed text'[popup content] ...</p> in a span wrapper.
The end result would look like this:
<span class='wrapper'>
displayed text
<span class='popup'>popup content</span>
</span>
At the moment I'm able to find and replace the text between apostrophes like this:
some_string.replace(/'(.*?)'/g,'<span>$1</span>');
But I would really like to wrap the popup content part first and then wrap it together with displayed text inside the wrapper element.
Would that be possible?

Sure - how about this?
some_string.replace(/'(.*?)'\[(.*?)\]/, "$1<span class='popup'>$2</span>");
Add a \s* between the two parts of the regex if they could be separated by whitespace:
/'(.*?)'\s*\[(.*?)\]/

How to replace text without replacing the node property [duplicate]

This question already has an answer here:
Replace text but not the HTML tags?
(1 answer)
Closed 8 years ago.
Suppose I've a HTML string
var _str = <div>The European languages are members of the same family. <div class="same">Their separate existence is a myth.</div> For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, <div class="same">their pronunciation and their most common words.</div></div>
I want to replace the text same to <span class="highlighted">same</span>
I was doing _str.replace('same', '<span class="highlighted">same</span>'); so it is also replacing the class="same" to class="<span class="highlighted">same</span>"
Can anyone help me how to replace only text not anything inside the node ( <> )?

A simple solution is to add a whitespace before 'same', like this:
_str.replace(' same', ' <span class="highlighted">same</span>');

_str.replace(/([^"])same([^"])/g, '$1<span class="highlighted">same</span>$2');
As you noted, this solution is limited to this particular string. If you want to replace only the text between the HTML tags, parsing the HTML will be the safest option.

Find all texts begin with English alphanumeric characters and end with English characters and put them inside <span> tag using jQuery

There is a page that most texts of the page are in Persian language with a specific font.
There are some website and email addresses in page.Some email addresses and website contain digits.But because of the font, this digits are shown Persian and not English.
All digits in page must be Persian but digits in email and website addresses must be English.
For example I have:
<div>
شرکت شماره 2 در وب سایت
wwww.web2.com
info#web2.com
2web.com
2web2web.com
22344web.com
</div>
Something like this will solve my problem :
CSS :
div span{font-family:arial;direction:ltr;}
first HTML solution:
<div>
شرکت شماره 2 در وب سایت
<span>wwww.web2.com</span>
<span>info#web2.com</span>
<span>2web.com</span>
<span>2web2web.com</span>
<span>22344web.com</span>
</div>
second HTML solution:
<div>
شرکت شماره 2 در وب سایت
wwww.web<span>2</span>.com
info#web<span>2</span>.com
<span>2</span>web.com
<span>2</span>web<span>2</span>web.com
<span>22344</span>web.com
</div>
I want that "شرکت شماره 2 در وب سایت" looks with implemented font (B Yekan) that show "2" like "۲" but other digits show with Arial font.
There is a lot of unorganized text in the page. I need a jQuery code that make one of my solutions.
Any suggestion about this jQuery code or any better idea?

You could do something like this (jsfiddle):
var regex = /\d+/g,
div = $('div'),
newHtml = div.html().replace(regex, function(match) {
return '<span>'+match+'</span>'
});
div.html(newHtml);
The regular expression will capture all occurrences of 1 or more digit characters. The callback passed to the replace method will then wrap each matched string of digit characters in a span element.
Lastly, that new HTML is set as the div element's HTML.

Using Quotations Marks in a title in Highslide JS

I am using Highslide as my picture viewer for my website and want to be able to use quotations mark in some text within my Title. When is simply put the relevant text into quotations marks all text beyond the 1st quotation mark is missing. Would appreciate some help on this matter - examples below:
<a class='highslide' href='../g94/18.jpg'
title="If I put text here and want "This piece in quotation marks" to make it stand out"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='../g94/s18.jpg' alt=''/></a>
The result is - If I put text here and want
or;
<a class='highslide' href='../g94/18.jpg'
title="If I put text here and want \"This piece in quotation marks\" to make it stand out"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='../g94/s18.jpg' alt=''/></a>
The result is - If I put text here and want \
Thanks John

The simplest fix is to use single quotes for the title attribute:
title='If I put text here and want "This piece in quotation marks" to make it stand out'