Errors with using TreeWalker to Replace Words, Chrome Extension

Question

// create a TreeWalker of all text nodes
var allTextNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT),
    // some temp references for performance
    tmptxt,
    tmpnode,
    // compile and cache the replace string, for performance
    matches = {Text A:"Text B",Text C:"Text D",Text E:"Text F"},
    replacer = new RegExp(Object.keys(matches).join("|"),"gi");

// iterate through all text nodes
while (allTextNodes.nextNode()) {
    tmpnode = allTextNodes.currentNode;
    tmptxt = tmpnode.nodeValue;
    tmpnode.nodeValue = tmptxt.replace(replacer, function(matched){ 
    return matches[matched];
);
}

I am getting this error: content.js:7 (anonymous function)

What am I doing wrong? (Please go easy, this is my first time trying to do anything in Javascript.)

I have tried things like adding and removing quotes (both ' and " ) around Text A, etc. I know this is probably a simple syntax issue, but am struggling.

Thank you.

[!!!UPDATE!!!]

OK, I was able to get rid of the errors with this code, but it's still not working to replace what I want:

// create a TreeWalker of all text nodes
var allTextNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT),
    // some temp references for performance
    tmptxt,
    tmpnode;
    // compile and cache the replace string, for performance
var matches = {"Text A":"Text B","Text C":"Text D","Text E":"Text F"};
var replacer = new RegExp(Object.keys(matches).join("|"),"gi");

// iterate through all text nodes
while (allTextNodes.nextNode()) {
    tmpnode = allTextNodes.currentNode;
    tmptxt = tmpnode.nodeValue;
    tmpnode.nodeValue = tmptxt.replace(replacer, function(matched){ 
    return matches[matched];
    });
}

Here is some of the HTML I am working with:

<div class="row">
     <div class="col-8">
       <div id="FundingContainer-ContentSection-TEXT A" class="atlas-ContentSection-container">
         <div class="atlas-SectionHeading-container atlas-SectionHeading-h2">
           <div class="">
             <h2 class="atlas-SectionHeading-accentBar">Text A</h2>
             <div class="atlas-SectionHeading-additionalHeaderComponent atlas-SectionHeading-additionalHeaderComponentPadding">
               <div style="display: inline-block;">
                 <h2 class="atlas-SectionHeading-accentBar">
                   <button id="FundingContainer-TextLink-EditPlans" class="atlas-TextLink-text false" tabindex="0"
                   type="button">Edit Plans</button>
                 </h2>
               </div>
             </div>
           </div>
         </div>
         <div>
           <div class="atlas-List-container atlas-List-border">
             <div class="atlas-List-listItem">
               <div class="atlas-List-primary">
                 <div class="SelectedRedactedPlan_container__1eac-">
                   <div class="RedactedPlan_container__1ss9R">
                     <div class="row">
                       <div class="col-11">
                         <h4 class="RedactedPlan_description__1dotH">Redacted</h4>
                         <div style="display: inline-block;">
                           <div class="atlas-Pill-container atlas-Pill-nonremovable atlas-Pill-status" tabindex="-1"
                           style="background-color: rgb(67, 126, 62); color: rgb(255, 255, 255);">
                             <div class="atlas-Pill-text">
                               <h4 class="RedactedPlan_description__1dotH">Selected</h4>
                             </div>
                           </div>
                         </div>
                       </div>
                       <div class="col-1">
                         <div style="display: inline-block;">
                           <span class="RedactedPlan_selectedPill__U0QJk">
                             <button id="RedactedPlan-TextLink-Clear" class="atlas-TextLink-text false" tabindex="0"
                             type="button">
                               <span class="RedactedPlan_selectedPill__U0QJk">CLEAR</span>
                             </button>
                           </span>
                         </div>
                       </div>
                     </div>
                     <div class="row">
                       <div class="col-12 RedactedPlan_appliedTo__K2tPx">
                         <h5>Applied to NAME (Primary)</h5>
                       </div>
                     </div>
                     <div class="row">
                       <div class="col-2">
                         <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2"
                         class="atlas-FieldGroup-width100">
                           <div class="atlas-FieldGroup-bottom-margin">
                             <div class="atlas-Label-container atlas-Label-standardLayout">
                               <div class="">
                                 <div class="atlas-Label-labelText">
                                   <label class="atlas-Label-label">Redacted 2</label>
                                 </div>
                               </div>
                               <div class="atlas-Label-actionElementCol"></div>
                             </div>
                             <div id="RedactedPlan-SummaryField-Redacted2" class="atlas-BaseSummaryField-text">
                             $280.78</div>
                           </div>
                         </div>
                       </div>
                       <div class="col-2">
                         <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2-TextBCompletion"
                         class="atlas-FieldGroup-width100">
                           <div class="atlas-FieldGroup-bottom-margin">
                             <div class="atlas-Label-container atlas-Label-standardLayout">
                               <div class="">
                                 <div class="atlas-Label-labelText">
                                   <label class="atlas-Label-label">Text B Completion</label>
                                 </div>
                               </div>
                               <div class="atlas-Label-actionElementCol"></div>
                             </div>
                             <div id="RedactedPlan-SummaryField-Redacted2-TextBCompletion"
                             class="atlas-BaseSummaryField-text">50%</div>
                           </div>
                         </div>
                       </div>
                       <div class="col-2">
                         <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2-TextBCost"
                         class="atlas-FieldGroup-width100">
                           <div class="atlas-FieldGroup-bottom-margin">
                             <div class="atlas-Label-container atlas-Label-standardLayout">
                               <div class="">
                                 <div class="atlas-Label-labelText">
                                   <label class="atlas-Label-label">Text B Cost</label>
                                 </div>
                               </div>
                               <div class="atlas-Label-actionElementCol"></div>
                             </div>
                             <div id="RedactedPlan-SummaryField-Redacted2-TextBCost"
                             class="atlas-BaseSummaryField-text">$300.00</div>
                           </div>
                         </div>
                       </div>
                       <div class="col-2">
                         <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2-TextBDuration"
                         class="atlas-FieldGroup-width100">
                           <div class="atlas-FieldGroup-bottom-margin">
                             <div class="atlas-Label-container atlas-Label-standardLayout">
                               <div class="">
                                 <div class="atlas-Label-labelText">
                                   <label class="atlas-Label-label">Text B Duration</label>
                                 </div>
                               </div>
                               <div class="atlas-Label-actionElementCol"></div>
                             </div>
                             <div id="RedactedPlan-SummaryField-Redacted2-Duration"
                             class="atlas-BaseSummaryField-text">0 mo</div>
                           </div>
                         </div>
                       </div>
                       <div class="col-2">
                         <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2-Date"
                         class="atlas-FieldGroup-width100">
                           <div class="atlas-FieldGroup-bottom-margin">
                             <div class="atlas-Label-container atlas-Label-standardLayout">
                               <div class="">
                                 <div class="atlas-Label-labelText">
                                   <label class="atlas-Label-label">Date</label>
                                 </div>
                               </div>
                               <div class="atlas-Label-actionElementCol"></div>
                             </div>
                             <div id="RedactedPlan-SummaryField-Redacted2-Date"
                             class="atlas-BaseSummaryField-text">3/28/2022</div>
                           </div>
                         </div>
                       </div>
                     </div>
                     <div class="row">
                       <div class="col-12">
                         <div class="row">
                           <div class="col-2">
                             <h5 id="RedactedPlan-Heading-CreatedBy">Created By</h5>
                           </div>
                           <div class="col-1">
                             <div style="display: inline-block;">
                               <button id="RedactedPlan-TextLink-Edit" class="atlas-TextLink-text false" tabindex="0"
                               type="button">EDIT</button>
                             </div>
                           </div>
                         </div>
                         <div class="row">
                           <div class="col-3">
                             <h4 id="RedactedPlan-Heading-CreatedBy"
                             class="RedactedPlan_createdByHeader__3K03V">Name, Name</h4>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
</div>

Ok, I did that and corrected some other issues with the }'s and )'s and ;'s. I am not getting an error anymore, but it's still not working. — Klara Kautz, Feb 18 '22 at 22:22
Assuming you reloaded the extension on chrome://extensions page and the tab too, your content script probably runs too early, before the page creates its contents dynamically. Use `setInterval` or `MutationObserver`, [example](https://stackoverflow.com/a/39334319). — wOxxOm, Feb 18 '22 at 22:30

score 0 · Answer 1 · answered Feb 19 '22 at 00:27

// create a TreeWalker of all text nodes
const myInterval = setInterval(MyReplacer,5000)
var allTextNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT),
    // some temp references for performance
    tmptxt,
    tmpnode;
    // compile and cache the replace string, for performance
var matches = {"Text A":"Text B","Text C":"Text D","Text E":"Text F"};
var replacer = new RegExp(Object.keys(matches).join("|"),"gi");

// iterate through all text nodes
function MyReplacer() {
while (allTextNodes.nextNode()) {
    tmpnode = allTextNodes.currentNode;
    tmptxt = tmpnode.nodeValue;
    tmpnode.nodeValue = tmptxt.replace(replacer, function(matched){ 
    return matches[matched];
    });
}}

This is the code I ended up getting to work. Much thanks to wOxxOm for the help!!!

Errors with using TreeWalker to Replace Words, Chrome Extension

1 Answers1