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

Upon page loading, I want to find all text in the body that is encapsulated in parentheses.. and replace it...

You could use regex to find text between a pattern and replace it.

For example:

text.replace(
    /(\{)(.*?)(\})/gi, 
    '<sup><i class="fa fa-lightbulb-o tooltip" title="$2"></i></sup>'
);

Where, the first group matches an opening brace {, the last group matches a closing brace } and the second group matches zero or more of any character i.e. all text in between. From these matched groups, we then replace the second group by way of the $2 placeholder in the replacement.

I don't have the element's ID. There could be zero or more instances in a page.

If you know that all your elements containing such text are same elements, then use a getElementsByTagName to get all such elements. If not, then it would be better if you could provide a common class to all such elements which you could then target with getElementsByClassName or querySelectorAll.

For example:

var p = document.getElementsByTagName('p');
[].forEach.call(p, function(elem) {
    // do the replacement here
});

The text inside the parentheses would then become the title of the . The text may have quotation marks

Just replace the required text within the title attribute of your i tag in the replacement string. Even better, use a data-title attribute so that you could the use CSS or any other Javascript library to show beautiful popup tooltips whenever you want.

For the quotes, use double-quotes for the attribute values and single quotes for your apostrophes inside the text. That would require no extra effort at your end.

Fiddle: http://jsfiddle.net/abhitalks/LL4seepp/

Snippet:

var p = document.getElementsByTagName('p'), 
    text, converted;

[].forEach.call(p, function(elem) {
    var original = elem.innerHTML, replaced;
    replaced = original.replace(/(\{)(.*?)(\})/gi, 
		'<sup><i class="fa fa-lightbulb-o tooltip" data-title="$2"></i></sup>'
	);
	elem.innerHTML = replaced;
});

i.tooltip {
    display: inline-block; position: relative;
    width: 0.75em; height: 0.75em; border-radius: 50%;
    background-color: #c33; cursor: help;
    font-size: 1.1em;
}
i.tooltip::after {
    content: attr(data-title);
    position: absolute; z-index: 100;
    top: -200%; left: 120%; opacity: 0;
    padding: 0px; text-align: center;
    width: 0; height: 0; overflow: hidden;
    background-color: #edb; border: 0px solid #666;
    transition: all 250ms 250ms ease; 
}
i.tooltip:hover::after {
    display: block; padding: 4px; 
    width: 128px; height: 1em; opacity: 1;
    border: 1px solid #333; 
    transform: translateY(50%);
}

<p>
    I want to write the way I write, but not force it down my readers throats. I often have side thoughts {like this} which I always put inside parenthesis {like so}.
    But I don't want to change the way I write. So I wondered... is it possible to take anything I write in parenthesis {here's an example} and re-write it.
</p>
<p>
    I want to write the way I write, but not force it down my readers throats. I often have side thoughts {like this with 'quotes'} which I always put inside parenthesis {like so}.
    But I don't want to change the way I write. So I wondered... is it possible to take anything I write in parenthesis {here's an example} and re-write it.
</p>

Answer 2

I think this is what you're looking for. Use regex to find and replace "((" and "))". Given this content:

<div id="content">without my having to actually DO anything special with the content? I could get in the habit of doubling up on the parenthesis if that helps ((like this would be a tooltip)) but (this would not).</div>

This code will search it and replace with your icon.

var target = document.getElementById('content'),
    str = target.innerHTML,
    pre = '<sup><i class="fa fa-lightbulb-o tooltip" title="',
    post = '"></i></sup>';
str = str.replace(/\(\(/g, pre).replace(/\)\)/g, post);
target.innerHTML = str;

Here's a jsfiddle: https://jsfiddle.net/mckinleymedia/fzn4trmL/

The title attribute doesn't have a lot of flexibility and this will have problems. You'd be much better off just surrounding the text by the icon, like so:

<i class="fa fa-lightbulb-o tooltip">like this would be a tooltip</i>

But then you need to have the tooltip show the html in the icon instead of the title.

Answer 3

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, ('<sup></sup>'));
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 = ('<i class="fa fa-lightbulb-o tooltip" title="' + tooltips[s] + '">' + (s + 1) + '</i>');
}

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;
}

<h2>Before</h2>
<div>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)).</div>

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

<h2>After</h2>
<p>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)).</p>

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

=====

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, ('<sup></sup>'));
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 = ('<i class="fa fa-lightbulb-o tooltip">' + (s + 1) + '</i><i class="fa fa-lightbulb-o tooltip">' + (s + 1) + '. ' + tooltips[s] + '</i>');
}

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;
}

<h2>Before</h2>
<div>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)).</div>

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

<h2>After</h2>
<p>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)).</p>

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