Find and replace text in an array before passing it to HTML

Question

I have a Google Web App that access text from a spreadsheet. I'd like to be able to find and replace snippets in the text loaded from the spreadsheet before it's passed to the HTML page.

Essentially I'd like to be able to just do:

roleSummary.replaceText("text to be replaced", "text to replace with") but not sure where to put it or if that's even the right way to go about it.

Any ideas? :)

Thanks in advance!

GAS:

//the function to show the data on the index.html
function PostRoles (rolesInfo){
  
  //load the data
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Role specific"); 
  var data = ws.getRange(4,1,ws.getLastRow(),8).getDisplayValues();
  
  var roleList = data.map(function(r){ return r[0]});
  var roleSummary = data.map(function(r){ return r[1]});
  var roleBullets = data.map(function(r){ return r[2]});
  var roleTasks = data.map(function(r){ return r[3]});
  var roleQualificationsSummary = data.map(function(r){ return r[4]});
  var roleQualificationsBullets = data.map(function(r){ return r[5]});
  var roleMandateSummary = data.map(function(r){ return r[6]});
  var roleMandateBullets = data.map(function(r){ return r[7]});
  
  var position = roleList.indexOf(rolesInfo.roles);
  var results = [roleSummary[position], roleBullets[position], roleTasks[position], roleQualificationsSummary[position], roleQualificationsBullets[position], roleMandateSummary[position], roleMandateBullets[position]];
  
  if(position > -1){
    
    return results; 
           
  }   
}

HTML:

<!DOCTYPE html>
    <html>
    
      <head>
        <base target="_top">
        
        <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
        
        <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
      
        <script>
       
        function onListSuccess(list) {
        
          var listLength = list.length;
          
          for (i=0; i<listLength;i++) {
            var dropdown = document.getElementById("subprojects");
            
            var opt = document.createElement("option");
            
            dropdown.options.add(opt);
            
            opt.text = list[i][0];
            opt.value = list[i][0];
                  
          }
        }   
        
        function onRolesListSuccess(roles) {
        
          var rolesLength = roles.length;
          
          for (i=0; i<rolesLength;i++) {
            var dropdown = document.getElementById("role");
            
            var opt = document.createElement("option");
            
            dropdown.options.add(opt);
            
            opt.text = roles[i][0];
            opt.value = roles[i][0];
                  
          }
        }  
           
        function onListSelect(domainDesc){
        
        var text = domainDesc.toString().split(",");
        var name2 = document.getElementById("subprojects").value;
        
        document.getElementById('est').innerHTML = domainDesc;
        document.getElementById('name').innerHTML = 'About the ' + name2 + ' team';  
        }
        
        function onRolesListSelect(results){
          
        document.getElementById('respons').innerHTML = results[0];
        document.getElementById('responsTag').innerHTML = 'Responsibilities';  
        
        document.getElementById('responsBullets').innerHTML = results[1];
        document.getElementById('responsBulletsTag').innerHTML = 'You are also:';  
        
        document.getElementById('responsTasks').innerHTML = results[2];
        document.getElementById('responsTasksTag').innerHTML = 'Example work tasks:';  
        
        document.getElementById('qualSummary').innerHTML = results[3];
        document.getElementById('qualSummaryTag').innerHTML = 'Qualifications';  
        
        document.getElementById('qualBullets').innerHTML = results[4];
        document.getElementById('qualBulletsTag').innerHTML = 'You are also:';  
        
        document.getElementById('mandateSummary').innerHTML = results[5];
        document.getElementById('mandateSummaryTag').innerHTML = 'Mandate';  
        
        if (roleSummary[6] == "") {} else {
        document.getElementById('mandateBullets').innerHTML = results[6];
        document.getElementById('mandateBulletsTag').innerHTML = 'You are also:';  
        }
        }
          
      </script>
     
      </head>
        
      <body>
        <div id="main">
        <table>
        <tr>
        <th>
          <label for="subprojects"><b>Domain:</b></label>
        </th>
        <th>
          <label for="subprojects"><b>Role:</b></label>
        </th>
        <th>
          <label for="grade"><b>Grade:</b></label>
        </th>
        </tr>
        <tr>
        <th>
          <select name="subprojects" id="subprojects" tabindex="2"></select>
        </th>
        <th>
          <select name="role" id="role" tabindex="2"></select>
        </th>
        <th>
          <select name="grade" id="grade" tabindex="2"></select>
        </th>
        </tr>
        </table>
        <br><br>
        <div>
            <button id="btn">Generate</button>
        </div>
        <br><br>
        <div>   
           <label for="est"><b><span id="name" name="name"></span></b></label>
            <p id="est" name="est"></p>
        </div>
        <div>   
           <label for="respons"><b><span id="responsTag" name="responsTag"></span></b></label>
           <p id="respons" name="respons"></p>
          
          <label for="responsBullets"><span id="responsBulletsTag" name="responsBulletsTag"></span></label>
           <p id="responsBullets" name="responsBullets"></p>
           
           <label for="responsTasks"><span id="responsTasksTag" name="responsTasksTag"></span></label>
           <p id="responsTasks" name="responsTasks"></p>
           
           <label for="qualSummary"><b><span id="qualSummaryTag" name="qualSummaryTag"></span></b></label>
           <p id="qualSummary" name="qualSummary"></p>
           
           <label for="qualBullets"><span id="qualBulletsTag" name="qualBulletsTag"></span></label>
           <p id="qualBullets" name="qualBullets"></p>
           
           <label for="mandateSummary"><b><span id="mandateSummaryTag" name="mandateSummaryTag"></span></b></label>
           <p id="mandateSummary" name="mandateSummary"></p>
           
           <label for="mandateBullets"><span id="mandateBulletsTag" name="mandateBulletsTag"></span></label>
           <p id="mandateBullets" name="mandateBullets"></p>
        </div>
        </div>
      </body>
        
      <script>
     
      function populateList(){
      google.script.run.withSuccessHandler(onListSuccess).valuesForList('subProjectsList');
      google.script.run.withSuccessHandler(onRolesListSuccess).valuesForRolesList('rolesList');
    
      }
       
      document.getElementById("btn").addEventListener("click", doStuff);
    
      function doStuff(){
      var userInfo = {};
      var rolesInfo = {};
      
      userInfo.subprojects = document.getElementById("subprojects").value;
      rolesInfo.roles = document.getElementById("role").value;
     
      google.script.run.withSuccessHandler(onListSelect).PostInfo(userInfo);
      google.script.run.withSuccessHandler(onRolesListSelect).PostRoles(rolesInfo);
      
      }
      
      window.addEventListener('load', populateList);
      
      
      </script>
    
    </html>

Your HTML file has only the script part. The rest code is missing. One could say it is not an HTML file at all. — Marios
– Marios, Commented Jan 11, 2021 at 12:33
Sorry, that's just the relevant script part from index.htnl. I'll update the post. — mikhga
– mikhga, Commented Jan 11, 2021 at 12:38

iansedano · Accepted Answer · 2021-01-11 14:01:19Z

You can use the `String.replace()` function

This function is a member of the String prototype. It is not available for the array prototype because not all arrays contain strings.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

Assuming the values that result from this line:

var roleSummary = data.map(function(r){ return r[1]});

Would be something like:

var roleSummary = [
    "Summary 1",
    "Summary 2",
    "Summary 3", 
    "Summary 4",
    "Summary 5",
    "Summary 6"
]

You could process them with another map function like what you have used:

var roleSummaryReplaced = roleSummary.map(function(val){
    return val.replace("Summary", "Smry");
})

Which would result in all values that matched "Summary" to be replaced with "Smry":

[
  "Smry 1",
  "Smry 2",
  "Smry 3",
  "Smry 4",
  "Smry 5",
  "Smry 6"
]

You could do it all within the original line too:

// Instead of:
var roleSummary = data.map(function(r){ return r[1]});

// Do this:
var roleSummary = data.map(function(r){
    return r[1].replace("text to be replaced", "text to replace with");
});

Extra note:

If the individual string values in the array may contain more than one occurrence of the text to be replaced, then modify your replace function to use regex and include the global flag:

var regex = /text to be replaced/g;

var roleSummary = data.map(function(r){
    return r[1].replace(regex, "text to replace with");
});

Or all on the same line:

var roleSummary = data.map(function(r){
    return r[1].replace(/text to be replaced/g, "text to replace with");
});

Reference

String.prototype.replace

Collectives™ on Stack Overflow

Find and replace text in an array before passing it to HTML

1 Answer 1

You can use the `String.replace()` function

Extra note:

Reference

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You can use the String.replace() function

Extra note:

Reference

Comments

Your Answer

Sign up or log in

Post as a guest

Related

You can use the `String.replace()` function