Creating an inline 'Jargon' helper in PHP

Question

I have an article formatted in HTML. It contains a whole lot of jargon words that perhaps some people wouldn't understand.

I also have a glossary of terms (MySQL Table) with definitions which would be helpful to there people.

I want to go through the HTML of my article and find instances of these glossary terms and replace them with some nice JavaScript which will show a 'tooltip' with a definition for the term.

I've done this nearly, but i'm still having some problems:

terms are being found within words (ie: APS is in Perhaps)
I have to make sure that it doesn't do this to alt, title, linked text, etc. So only text that doesn't have any formatting applied. BUT it needs to work in tables and paragraphs.

Here is the code I have:

$query_glossary = "SELECT word FROM glossary_terms WHERE status = 1 ORDER BY LENGTH(word) DESC";
$result_glossary = mysql_query_run($query_glossary);

//reset mysql via seek so we don't have to do the query again
mysql_data_seek($result_glossary,0); 

while($glossary = mysql_fetch_array($result_glossary)) {

    //once done we can replace the words with a nice tip
    $glossary_word = $glossary['word'];
    $glossary_word = preg_quote($glossary_word,'/');        
    $article['content'] = preg_replace_callback('/[\s]('.$glossary_word.')[\s](.*?>)/i','article_checkOpenTag',$article['content'],10);     
}

And here is the PHP function:

function article_checkOpenTag($matches) {
  if (strpos($matches[0], '<') === false) {
    return $matches[0];
  } 
    else {
        $query_term = "SELECT word,glossary_term_id,info FROM glossary_terms WHERE word = '".escape($matches[1])."'";
        $result_term = mysql_query_run($query_term);
        $term = mysql_fetch_array($result_term);

        # CREATING A RELEVENT LINK
        $glossary_id = $term['glossary_term_id'];
        $glossary_link = SITEURL.'/glossary/term/'.string_to_url($term['word']).'-'.$term['glossary_term_id'];

        # SOME DESCRIPTION STUFF FOR THE TOOLTIP
        if(strlen($term['info'])>400) {
            $glossary_info = substr(strip_tags($term['info']),0,350).' ...<br /> <a href="'.$glossary_link.'">Read More</a>';
        }
        else {
            $glossary_info = $term['info'];
        }


        return ' <a href="javascript:;" onmouseout="UnTip();" class="article_jargon_highligher" onmouseover="'.tooltip_javascript('<a href="'.$glossary_link.'">'.$term['word'].'</a>',$glossary_info,400,1,0,1).'">'.$matches[1].'</a> '.$matches[2];
  }
}

Have you tried surrounding the glossary word in the regex with the word boundary escape sequence: `\b` — Chris Laplante, Jul 01 '11 at 14:53
see also?: http://stackoverflow.com/questions/6520462/search-and-replace-words-in-html — DA., Jul 01 '11 at 15:35
@SimpleCoder Care to give an example? I'm not that great with regex — David, Jul 04 '11 at 13:16
Using links with `javascript:` pseudo URLs is bad practice which violates the principle of _graceful degradation_ (i.e. your site should work correctly with javascript turned off). Besides, there is no need for such complexity. To add a tooltip, just place it in a `TITLE` attribute: e.g. `Jargon term`. All modern browsers (including IE6) will create a pop-up displaying this text when hovered over. K.I.S.S. — ridgerunner, Jul 04 '11 at 14:52
As DA points out this question is a duplicate of [Search and Replace Words in HTML](http://stackoverflow.com/questions/6520462/search-and-replace-words-in-html). Asking the question multiple times is not helpful. — ridgerunner, Jul 04 '11 at 14:59
@David: Basically, the word boundary escape sequence will match any character that can't be part of a word, such as a space or tab. Surround your word with `\b` in your Regex and it won't match part of words. — Chris Laplante, Jul 04 '11 at 18:07

scaryzet · Accepted Answer · 2011-07-01T15:32:04.803

Move the load from server to client. Assuming that your "dictionary of slang" changes not frequently and that you want to "add nice tooltips" to words across a lot of articles, you can export it into a .js file and add a corresponding <script> entry into your pages - just a static file easily cacheable by a web-browser.

Then write a client-side js-script that will try to find a dom-node where "a content with slang" is put, then parse out the occurences of the words from your dictionary and wrap them with some html to show tooltips. Everything with js, everything client-side.

If the method is not suitable and you're going to do the job within your php backend, at least consider some caching of processed content.

I also see that you insert a description text for every "jargon word" found within content. What if a word is very frequent across an article? You get overhead. Make that descriptions separate, put them into JS as an object. The task is to find words which have a description and just mark them using some short tag, for instance <em>. Your js-script should find that em`s, pick a description from the object (associative array with descriptions for words) and construct a tooltip dynamically on "mouse over" event.

score 0 · Answer 2 · edited Aug 19 '18 at 10:51

Interestingly enough, I was searching exactly NOT for a question like yours, but while reading I realized that your question is one that I had been through quite some time ago

It was basically a system to parse a dictionary and spits augmented HTML.

My suggestion would include instead:

Use database if you want, but a cached generated CSV file could be faster to use as dictionary
Use a hook in your rendering system to parse the actual content within this dictionary
caching of the page could be useful too

I elaborated a solution on my blog (in French, sorry for that). But it outlines basically something that you can actually use to do that.

I called it "ContentAbbrGenerator" as a MODx plugin. But the raw of the plugin can be applied outside of the established structure.

Anyway you can download the zip file and get the RegExes and find a way around it.

My objective

Use one file that is read to get the kind of html decoration.
Generate html from within author entered content that doesnt know about accessibility and tags (dfn and or abbr)
Make it re-usable.
Make it i18n-izable. That is, in french, we use the english definition but the adaptative technology reads the english word in french and sounds weird. So we had to use the lang="" attribute to make it clear.

What I did

Is basically that the text you give, gets more semantic.

Imagine the following dictionary:

en;abbr;HTML;Hyper Text Markup Language;es
en;abbr;abbr;Abbreviation

Then, the content entered by the CMS could spit a text like this:

<p>Have you ever wanted to do not hassle with HTML abbr tags but was too lazy to hand-code them all!? That is my solution :)</p>

That gets translated into:

    <p>Have you ever wanted to do not hassle with <abbr title="Hyper Text Markup Language" lang="es">HTML</abbr> <abbr title="Abbreviation">abbr</abbr> tags but was too lazy to hand-code them all!? That is my solution :)</p>

All depends from one CSV file that you can generate from your database.

The conventions I used

The file /abbreviations.txt is publicly available on the server (that could be generated) is a dictionary, one definition per accronym
An implementation has only to read the file and apply it BEFORE sending it to the client

The tooltips

I strongly recommend you use the tooltip tool that even Twitter Bootstrap implements. It basically reads the title of any marked up tags you want.

Have a look there: Bootstrap from Twitter with Toolip helper.

PS: I'm very sold to the use of the patterns Twitter put forward with this Bootstrap project, it's worth a look!!

Creating an inline 'Jargon' helper in PHP

2 Answers2