MS-Word add-in won't preserve formatting using insertHTML to insert link

Question

I'm doing a full-text search of a word document using JavaScript in a web add-in I'm developing in Visual Studio. My task is to create custom links in the document when I find certain strings matching a pattern. The problem here is that when I insert the link, it changes the font size and type. Most of the test document I'm using is in Times New Roman, 12pt. When the link is inserted, the font in most of them (but not all) change to CG Times, 10pt.

I've tried capturing the font name and size and assigning it to the link using the inline "style" attribute. style="font-family: 'Times New Roman' font-size: 12px // or 12 or 12pt I've also tried capturing the style and assigning it to the link using the "class" attribute. No luck. The only thing I've done that has partly worked is to insert a link tag inside the anchor tag, which is obviously undesirable. Preserves the font, but not the size. My for loop:

for (let i = 0; i < searchResults.items.length; i++) {
                        var sFontName = searchResults.items[i].font.name;
                        var sFontSize = searchResults.items[i].font.size;
                        //var sStyle = searchResults.items[i].style;
                        //var sStyleString = 'class="' + sStyle + '\" ';
                        //var sFontTag = '<font face="\'' + sFontName + '\'" size="' + sFontSize + '" >'; 
                        var sStyleString = 'style="font-family: \'' + sFontName + '\' font-size: ' + sFontSize + '"';

                        var sItem = (searchResults.items[i].text); //(searchResults.items[i].text).replace(' ', '_');
                        var sChaptSec = sItem.slice(4);
                        var sChaptSecArray = sChaptSec.split(".");
                        var sChapter = sChaptSecArray[0];
                        var sSection = sChaptSecArray[1];
                        var sLink = "http://www.example.com/BookRef/" + sChapter + "/" + sSection + "/";
                        var sAnchorTag = '<a href="' + sLink + '" ' + sStyleString +
                            ' target="_blank" rel="noopener noreferrer">' + sItem + '</a> '; //+ sFontTag     </font>
                        //searchResults.items[i].hyperlink = sAnchorTag;
                        searchResults.items[i].insertHtml(sAnchorTag, "replace"); //(sAnchorTag, "replace");
                    }

Any suggestions?

Answer 1

Figured it out. It was much simpler than expected once discovered. I simply had to re-assign the values to the same elements I had retrieved them from.

    for (let i = 0; i < searchResults.items.length; i++) {
      var sItem = (searchResults.items[i].text);  
      //get font name and size
      var sFontName = searchResults.items[i].font.name;
      var sFontSize = searchResults.items[i].font.size;
      var sChaptSec = sItem.slice(4);
      var sChaptSecArray = sChaptSec.split(".");
      var sChapter = sChaptSecArray[0];
      var sSection = sChaptSecArray[1];
      var sLink = "http://www.example.com/BookRef/" + sChapter + "/" + sSection + "/";
      var sAnchorTag = '<a href="' + sLink + 
        '" target="_blank" rel="noopener noreferrer">' + sItem + "</a> ";
      searchResults.items[i].insertHtml(sAnchorTag, "replace");
      //reassign font name and size 
      searchResults.items[i].font.name = sFontName;
      searchResults.items[i].font.size = sFontSize;
    }