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, 
    ''
);

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, 
		''
	);
	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%);
}

    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.


    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.