Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

google apps script - Find and replace text in an array before passing it to HTML

0 votes
422 views
in Technique[技术] by (71.8m points)

google apps script - Find and replace text in an array before passing it to HTML

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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share

Just Browsing Browsing

2.1m questions

2.1m answers

62 comments

56.6k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...