wp stripping tags added by my plugin… where? how? why?

Hi,

I have a very thin plugin that takes the code from https://www.pebbleroad.com/labs/glossarizer and wraps it in a plugin. There’s no admin panels or anything advanced… Just a JQuery plugin that looks for terms from a json list, and if it finds them, wraps them in an <abbr> with the title attribute being equal to the corresponding definition found in the json file.

When I dump document.body.innerHTML to the console log, I can see that the plugin gets entered and indeed wraps the terms in those tags. But between the time my code executes and dumps that successful HTML to the console and the final delivery to the browser, the tags are removed.

This is on a development site so I can’t give access, it’s behind a firewall currently. The plugin php is below:

<?php
/*
Plugin Name: Glossarizer
Plugin URI: https://www.research.chop.edu
Description: This plugin wraps terms
Author: Joy Payton
Version: 1.0
Author URI: https://www.research.chop.edu
*/

// This allows <abbr> to appear in posts, or should.
// when I dump these arrays I can tell that the changes below
// do indeed change the globals... but I wonder if I'm missing
// some other filtering mechanism?!?
global $allowedposttags;
$allowedposttags["abbr"] = array(
 "title" => true,
 "tabindex"=> true,
 "class" => true
);
global $allowedtags;
$allowedtags["abbr"] = array(
 "title" => true,
 "tabindex"=> true,
 "class" => true
);

function glossarizer_js() {

	wp_enqueue_script( 'jquery' );
	wp_enqueue_script('gloss-tooltip', plugins_url() . '/glossarizer/tooltip/tooltip.js', array('jquery'), '1.2.3', true);
	// gloss-tooltip'is currently unused but will eventually take the wrapped terms and drop a jQuery tooltip there.
	wp_enqueue_script('glossarizer', plugins_url() .  '/glossarizer/jquery.glossarize.js', array('gloss-tooltip'), '1.2.3', true);
	// glossarizer does the heavy lifting of traversing the dom, finding terms that are part of the glossary, and wrapping them in tags
	// that include a title attribute equal to the matching definition
	wp_enqueue_script('glossy', plugins_url() . '/glossarizer/glossy.js', array('glossarizer'), '1.2.3', true);
	// glossy is what calls glossarizer for a given dom element, in this case a div with a specific ID

}
  add_action('wp_enqueue_scripts', 'glossarizer_js');  // queuing up
  add_action('wp_print_scripts', 'glossy'); // not sure this is necessary?

?>

Additionally, here is “glossy”. The other two files are essentially unchanged from the glossarizer homepage.

jQuery(document).ready(function ($) {

      jQuery('#article-wrapper').glossarizer({
        sourceURL: '/roadmap/wp-content/plugins/glossarizer/glossary.json',
        callback: function(){
          console.log(document.body.innerHTML);
          // when I dump the console log, the tags are there

         // new tooltip();  not using tooltips until I can make the tags stick!
       }
      });

      });

Lastly, here’s an example of what comes up in my console log as part of the document.body.innerHTML dump:

<p>It happens to almost every parent of a <abbr tabindex="0" class="glossarizer_replaced" title="A smallish human">child</abbr> with <abbr tabindex="0" class="glossarizer_replaced" title="Definition here">Autism</abbr> Spectrum Disorder (ASD) at some point. You are in a grocery store, at the park, or a restaurant. Your <abbr tabindex="0" class="glossarizer_replaced" title="A smallish human">child</abbr> with ASD is not having a great day. Maybe<span class="ellipsis">…</span> </p><div class="read-more"><a href="/roadmap/cant-you-control-your-child-ways-to-respond/">Read more ?</a></div>

HOWEVER, the final document does *not* have the tags! For example, the paragraph above renders thus:

<p>It happens to almost every parent of a child with Autism Spectrum Disorder (ASD) at some point. You are in a grocery store, at the park, or a restaurant. Your child with ASD is not having a great day. Maybe<span class="ellipsis">…</span>
</p>