How to batch process HTML files, looking for an object inside of an array, and adding a new value pair

Question

I have hundreds of html files that contain a JavaScript containing a manifest array like this:

var manifest = [{
      src: "audio1.mp3", //might have different name and path per file
      id: "audio1"       //might have different name and path per file
    },
    {
      src: "audio2.mp3",
      id: "audio2"
    },
    {
      //etc...
    }]

I want to add a new key-value pair (exaclty the same in each case) to each object in each HTML page's manifest array so that it looks like

var manifest = [{
      src: "audio1.mp3",
      id: "audio1",
      sameKey : "sameValue"
    },
    {
      src: "audio2.mp3",
      id: "audio2",
      sameKey : "sameValue"
    },
    {
    //etc...
    }]

Any tools or tricks to do this in one batch? Thanks in advance.

No need to use regex for this. It's an array of objects, just iterate `manifest` and add the attribute. Refer to [Add new attribute (element) to JSON object using JavaScript](https://stackoverflow.com/questions/736590/add-new-attribute-element-to-json-object-using-javascript). Also, you may want to update your question to include the language as regex engines greatly differ. This looks like JavaScript, so add the [tag:javascript] tag. — ctwheels, Feb 26 '18 at 18:21
Ah, you have hundreds of files, gotcha. What text editor are you using? If not using a text editor, what other options are available that you're willing to use: PowerShell, awk, C#, PHP, etc? — ctwheels, Feb 26 '18 at 18:27
I'm using the free VS Code, and I do have Powershell. I can also build things with Node. — Point Clear Media, Feb 26 '18 at 18:29
Your best bet is probably to create an extension. I've never done so for VS Code, but [this](https://code.visualstudio.com/docs/extensions/example-hello-world) might help you. — ctwheels, Feb 26 '18 at 18:39

Mark · Answer 1 · 2018-02-28T03:18:29.830

You have various options. At the simplest you could do a search and replace across files (Ctrl-Shift-F)

Search for :  `(id: ".*")`  

Replace with : `$1,\n\tsomeKey: "someValue"`

How many tabs \t's you need in there depends on your indentation. If you always have an id: "...."

You could put that into a task of some sort, like gulp and gulp-replace using those string match and replace values if you prefer to choose files by some criterion.

[EDIT]

Gulp version:

var gulp = require("gulp");
var replace = require('gulp-replace');

gulp.task('default', function () {

  return gulp.src('./src/**/*.js')

    .pipe(replace(/(id: ".*")/g,  '$1,\n    someKey: "someValue"'))
    .pipe(gulp.dest('dist'));
});

node program version:

const glob = require("glob");
const fs = require("fs");
const path = require("path");

glob("./src/**/*.js", function (er, files) {

  files.forEach(file => {

    const contents = fs.readFileSync(file, "utf8");
    var temp = contents.replace(/(id: ".*")/g, '$1,\n    someKey: "someValue"');

    fs.writeFileSync(path.join("dist", path.basename(file)), temp);   
  });
})

Mark, this is exactly what I was looking for. Thank you. It works perfectly in each file. Now I just need to build something to run it through all files as a batch. — Point Clear Media, Feb 27 '18 at 18:06
I added a couple of ways to run it with a glob of files - obviously the gulp version is pretty simple. — Mark, Feb 28 '18 at 03:19

How to batch process HTML files, looking for an object inside of an array, and adding a new value pair

1 Answers1