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:
<sup><i class="fa fa-lightbulb-o tooltip" title="here's an example"></i></sup>
I don't have the element's ID. There could be zero or more instances in a page. The text inside the parentheses would then become the title of the . The text may have quotation marks.
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>