JS to automatically convert text in parentheses with specific markup including match

Question

Upon page loading, I want to find all text in the body that is encapsulated in parenthess (here\'s an example) and replace it with the following:

<         


        

Answer 1

I like this problem!

My approach would be to loop through the document's paragraphs, collecting all the double-bracketed side-comments into an array, first.

That way, you can subsequently display (or re-display) the side-comments as superscripts, or as footnotes or as end-notes (etc.)

// Initialise variables
var paragraphsNodeList = document.getElementsByTagName('p');
var paragraphText = [];
var text = '';

// Collect all paragraphs in the document into one long text string
for (var p = 0; p < paragraphsNodeList.length; p++) {
text += paragraphsNodeList[p].innerHTML;
text += ' ';
}

// Harvest the tooltips from the long text string, collect them into an array, tidy them up
var tooltips = text.match(/\(\([^\)]+\)\)/g);

for (var t = 0; t < tooltips.length; t++) {
tooltips[t] = tooltips[t].replace("((", "");
tooltips[t] = tooltips[t].replace("))", "");
}

// Loop through each paragraph, replacing each side-comment with a superscript element
for (var p = 0; p < paragraphsNodeList.length; p++) {
paragraphText[p] = paragraphsNodeList[p].innerHTML;
paragraphText[p] = paragraphText[p].replace(/\(\([^\)]+\)\)/g, (''));
paragraphsNodeList[p].innerHTML = paragraphText[p];
}

// Loop through all the superscript elements, adding the relevant markup and tooltip
var supNodeList = document.getElementsByTagName('sup');

for (var s = 0; s < supNodeList.length; s++) {
supNodeList[s].innerHTML = ('' + (s + 1) + '');
}

h2 {
margin: 24px 0 4px;
font-size: 14px;
text-transform: uppercase;
}

h2:nth-of-type(1) {
margin-top: 12px;
}

div, p {margin-bottom: 12px;}

h2 + div, h2 + p {
margin-top:0;
}

Before
I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).

It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).

After
I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).

It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).

=====

Improved Version with Better Looking Tooltips

// Initialise variables
var paragraphsNodeList = document.getElementsByTagName('p');
var paragraphText = [];
var text = '';

// Collect all paragraphs in the document into one long text string
for (var p = 0; p < paragraphsNodeList.length; p++) {
text += paragraphsNodeList[p].innerHTML;
text += ' ';
}

// Harvest the tooltips from the long text string, collect them into an array, tidy them up
var tooltips = text.match(/\(\([^\)]+\)\)/g);

for (var t = 0; t < tooltips.length; t++) {
tooltips[t] = tooltips[t].replace("((", "[...] ");
tooltips[t] = tooltips[t].replace("))", " [...]");
}

// Loop through each paragraph, replacing each side-comment with a superscript element
for (var p = 0; p < paragraphsNodeList.length; p++) {
paragraphText[p] = paragraphsNodeList[p].innerHTML;
paragraphText[p] = paragraphText[p].replace(/\(\([^\)]+\)\)/g, (''));
paragraphsNodeList[p].innerHTML = paragraphText[p];
}

// Loop through all the superscript elements, adding the relevant markup and tooltip
var supNodeList = document.getElementsByTagName('sup');

for (var s = 0; s < supNodeList.length; s++) {
supNodeList[s].innerHTML = ('' + (s + 1) + '' + (s + 1) + '. ' + tooltips[s] + '');
}

body {
max-width: 720px;
}

h2 {
margin: 24px 0 4px;
font-size: 14px;
text-transform: uppercase;
}

h2:nth-of-type(1) {
margin-top: 12px;
}

div, p {
font-size: 16px;
line-height: 24px;
margin-bottom: 12px;
}

h2 + div, h2 + p {
margin-top:0;
}

sup i {
position: relative;
top: -4px;
vertical-align: top;
display: inline-block;
padding: 1px;
border: 1px solid rgba(127,0,0,1);
background: rgba(255,255,127,1);
width: auto;
height: auto;
font-style: normal;
font-weight: bold;
font-size: 8px;
}

sup i:nth-of-type(even) {
display: none;
opacity: 0;
}

sup:hover i:nth-of-type(odd) {
display: none;
}

sup:hover i:nth-of-type(even) {
z-index: 12;
display: inline-block;
opacity: 0;
width: 180px;
padding: 4px;
margin-right: -182px;
margin-bottom: -100%;
font-weight: normal;
font-style: italic;
font-size: 13px;
transition: all 0.75s ease-in;
}

sup:hover i:nth-of-type(even):hover {
opacity: 1;
}

Before
I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).

It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).

After
I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).

It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).