How can I replace the text in JSON string with a userscript for Greasemonkey

Question

I want to create a user script for Greasemonkey in Firefox without using jQuery, which can replace old text by new text when the page of website is loaded.

HTML code:

..

window.app = profileBuilder({
..
    "page": {
        "btn": {
            "eye": "blue",
            "favorite_color": "blue",
            "gender": "male",
        },
    },
..
});

..

Replace "blue" of eye by "green", "blue" of favorite color by "red" and "male" by "female".

When the page will be loaded, I want to see, for instance Green (not Blue) for Eye and Female for Gender (not Male).

I guess I need to use functions next:

GM_getValue()
GM_setValue()
JSON.parse()
JSON.stringify()

PS: the code JSON is directly in the page and not in file (../code.json)

Userscript code:

// ==UserScript==
// @name        nemrod Test
// @namespace   nemrod
// @include     http*://mywebsite.com/*
// @version     1
// ==/UserScript==
var json = {"page": {"btn": {"eye": "blue","favorite_color": "blue","gender": "male",},},};
var stringified = JSON.stringify(json);
stringified = stringified.replace(/"eye": "blue"/gm, '"eye": "green"');
stringified = stringified.replace(/"favorite_color": "blue"/gm, '"favorite_color": "red"');
var jsonObject = JSON.parse(stringified);

It doesn't work

Can somebody help with the right code?

What have you tried and why is it your guess that you need to use those functions? — Paul
– Paul, Commented Feb 1, 2015 at 14:48
this is just an object so you can use unsafeWindow.page.btn.eye = "green"; — Vishal Sharma
– Vishal Sharma, Commented Feb 1, 2015 at 15:22

Anirudh Ajith · Accepted Answer · 2015-02-02 11:01:04Z

16

First stringify() your JSON.

var stringified = JSON.stringify(json);

Next, use the .replace() JavaScript String function.

stringified = stringified.replace('"eye": "blue"', '"eye": "green"');
stringified = stringified.replace('"gender": "male"', '"gender": "female"');

Now parse() your JSON into an object.

var jsonObject = JSON.parse(stringified);

Now, you can use jsonObject for whatever you want.

EDIT: Use these lines instead of the previous .replace()s.

stringified = stringified.replace('"eye": "blue"', '"eye": "green"');
stringified = stringified.replace('"gender": "male"', '"gender": "female"');

edited Feb 2, 2015 at 11:01

answered Feb 1, 2015 at 15:45

Anirudh Ajith

9271 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nemrod Over a year ago

Can I use a regex ? Like /"eye": "(d+)"/g replace "eye": "green", because if I have "favorite_color": "blue" we can see 2 time the same color.

Anirudh Ajith Over a year ago

You could but I think the .replace() String function is more straightforward right now since it is provided in JavaScript anyway. You could use RegEx too if you want to.

Gal Ziv · Accepted Answer · 2015-02-01 16:10:27Z

2

more accurate procedure would be to use regular expression.

   stringified.replace(/"eyes":"blue"/gm, '"eyes":"blue"')

this way you know you're replacing the blue for eyes and not any blue appearing (like favorite color). the 'g' & 'm' options for regular expression stands for global which will cause searching for all applicable matches (in case you have more than one 'eyes' in your json) and 'm' for multiline. in case your string is multilined.

answered Feb 1, 2015 at 16:10

Gal Ziv

7,41212 gold badges35 silver badges46 bronze badges

1 Comment

salvi shahzad Over a year ago

I am not able to replace it like this

Krzysztof Safjanowski · Accepted Answer · 2016-06-27 15:35:48Z

First iteration - JSON.stringify

var json = {"page": {"btn": {"eye": "blue","favorite_color": "blue","gender": "male"}}};

var replaceBy = {
  eye: function(value) {
    if (value == 'blue') {
      return 'green'
    }
  },
  favorite_color: function(value) {
    if(value == 'blue') {
      return 'red'
    }
  },
  gender: function(value) {
    if(value == 'male') {
      return 'female'
    }
  }
}

console.log(JSON.stringify(json, function(key, value) {
  if(replaceBy[key]) {
    value = replaceBy[key](value)
  }
  return value
}))

Second iteration - be nice for ES Harmony

add rule - adds strict comparison
add matcher - adds any function that is responsible for data matching / replacing

'use strict'

var json = {
  "page": {
    "btn": {
      "eye": "Blue",
      "favorite_color": "blue",
      "gender": "male"
    }
  }
};

class Replacer {
  constructor() {
    this.matchers = []
  }

  addRule(rule, source, destination) {
    this.matchers.push({
      type: rule,
      matcher: value => value == source ? destination : value
    })
    return this
  }

  addMatcher(type, matcher) {
    this.matchers.push({
      type: type,
      matcher: matcher
    })
    return this
  }

  getByType(type) {
    return this.matchers.find(matcher => matcher.type === type)
  }

  applyRuleFor(type, value) {
    if (this.getByType(type)) {
      return this.getByType(type).matcher(value)
    }
  }

  static replaceWith(replacer) {
    return (key, value) => {
      if (replacer.getByType(key)) {
        value = replacer.applyRuleFor(key, value)
      }
      return value
    }
  }
}

console.log(JSON.stringify(json, Replacer.replaceWith(new Replacer()
  .addMatcher('eye', (value) => value.match(/blue/i) ? 'green' : value)
  .addRule('favorite_color', 'blue', 'red')
  .addRule('gender', 'male', 'female'))))

Jason Aller · Accepted Answer · 2018-05-09 05:10:35Z

0

JSON string manipulation can be done easily with JSON.parse() and JSON.stringify().

A sample example is given below:

var tweet = '{ "event": { "type": "message_create", "message_create": { "target": { "recipient_id": "xx_xx" }, "message_data": { "text": "xxx_xxx" } } } }';

var obj = JSON.parse(tweet);
obj.event.message_create.target.recipient_id = Receiver;
obj.event.message_create.message_data.text = statusText;

var tweetString = JSON.stringify(obj);

Now the tweetString has the updated JSON object.

edited May 9, 2018 at 5:10

Jason Aller

3,66028 gold badges43 silver badges40 bronze badges

answered May 9, 2018 at 4:00

Dhanya Gopinath

1371 silver badge3 bronze badges

Collectives™ on Stack Overflow

How can I replace the text in JSON string with a userscript for Greasemonkey

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related