Add option for tagName to replace <span> as wrapper

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Configuration variable for tag name to use instead of `<span>` for the replacement wrapper
 
 ## [0.9.9] - 2021-05-06
 ### Deprecated

src/DomManager.js

@@ -15,6 +15,8 @@ class DomManager {
    * @param {Object} dictionaryDefinition Replacement dictionary
    *  definition object.
    * @param {Object} [config] Configuration options
+   * @param {string} [config.tagName='span'] The tag used to wrap the
+   *  replacements that were found.
    * @param {boolean} [config.showOriginalTerm=true] Show the
    *  original term that was replaced in the title="" prop of
    *  the wrapper span.
@@ -45,6 +47,7 @@ class DomManager {
   constructor(dictionaryDefinition, config = {}) {
     this.replacer = new Replacer(dictionaryDefinition);
 
+    this.tagName = config.tagName || 'span';
     this.showOriginalTerm = config.showOriginalTerm === undefined ? true : config.showOriginalTerm;
     this.stripScriptTags = config.stripScriptTags === undefined ? true : config.stripScriptTags;
     this.keepSameCase = config.keepSameCase === undefined ? true : config.keepSameCase;
@@ -234,7 +237,7 @@ class DomManager {
 
     // Replacement
     const props = this.collectWrapperProps(match, dictKeyFrom, dictKeyTo, replacementData);
-    return `<span ${props}>${visibleTerm}</span>`;
+    return `<${this.tagName} ${props}>${visibleTerm}</${this.tagName}>`;
   }
   /**
    * Check whether the given node is relevant for replacement.

test/DomManager.spec.js

@@ -158,7 +158,43 @@ describe('DomManager test', () => {
     });
   });
 
-    describe('sanitize', () => {
+  describe('Change wrapper tag', () => {
+    const manager = new DomManager(dictDefinition, { tagName: 'abbr' });
+    const testCases = [
+      {
+        msg: 'Single replacement in h1 tag',
+        input: '<h1>Title with term1!</h1>',
+        expected: '<h1>Title with <abbr class="replaced-term" title="term1">flippedterm1</abbr>!</h1>'
+      },
+      {
+        msg: 'Multiple replacements in the same tag',
+        input: '<p>Text with term1 and term3 together</p>',
+        expected: '<p>Text with <abbr class="replaced-term" title="term1">flippedterm1</abbr> and <abbr class="replaced-term" title="term3">flippedterm3</abbr> together</p>'
+      }
+    ];
+
+    testCases.forEach(t => {
+      const result = manager.replace(t.input, 'dict1','dict2', { replaceBothWays: !!t.both });
+      it(t.msg, () => {
+        if (Array.isArray(t.expected)) {
+          // In this case, we may have two options, so check if at least one (but no others) is correct
+          const equalsToAtLeastOne = result === wrapHtmlResult(t.expected[0]) || result === wrapHtmlResult(t.expected[1]);
+          expect(equalsToAtLeastOne).to.be.true;
+        } else {
+          expect(result).to.be.equal(wrapHtmlResult(t.expected));
+        }
+      });
+    });
+
+    // Custom tag
+    const manager2 = new DomManager(dictDefinition, { tagName: 'popup' });
+    const result = manager2.replace('<h1>Title with term1!</h1>', 'dict1','dict2');
+    it('Falls back gracefully on `span` if an invalid tag is used', () => {
+      expect(result).to.be.equal(wrapHtmlResult('<h1>Title with <popup class="replaced-term" title="term1">flippedterm1</popup>!</h1>'));
+    });
+  });
+
+  describe('sanitize', () => {
     const dict = new Dictionary('test dictionary', []);
     const manager = new DomManager(dictDefinition);