Agu V Agu V - 2 months ago 5x
JSON Question

Can't access Json key with spaces in gulp internationalization module

I'm struggling to make this json work into gulp-html-i18n

"test": [
"reg1": "Korea",
"reg2 test": "222",
"reg3 name": "name2",
"reg1": "Japan",
"reg2 test": "223",
"reg3 name": "name3",

In HTML I'm doing


And it works, but when I try any of the following alternatives, none worked. Is there a way to accomplish this without changing the json?

${{filename.test.0.reg2 test}}$
${{filename.test.0.['reg2 test']}}$
${{filename.test.0.[reg2 test]}}$


By default gulp-html-i18n uses a simple regex-based engine in order to replace ${{ }}$ placeholders with the strings you define in your JSON.

The regex used to identify placeholders is the following:

/\${{ ?([\w-.]+) ?}}\$/g


As you can see this only permits a single leading/trailing space in the placeholder. The leading/trailing space is not interpreted as part of the property key.

If you want spaces within a property key you need a different regex. The following regex allows you to use spaces in properties. Leading/trailing spaces are still ignored and not interpreted as part of the property key:

/\${{ ?([\w-. ]+?) ?}}\$/


You can tell gulp-html-i18n to use this regex with the langRegExp option:

gulp.task('default', function() {
  return gulp.src('index.html')
      langDir: './lang',
      langRegExp: /\${{ ?([\w-. ]+?) ?}}\$/g

Then in your HTML you can use placeholders like this:

${{filename.test.0.reg2 test}}$
${{ filename.test.0.reg2 test }}$
${{ filename.test.0.reg1 }}$

Which should produce the following output: