如何用Greasemonkey的用戶腳本替換JSON字符串中的文本

Question

我想在Firefox中為Greasemonkey創建一個用戶腳本而不使用jQuery，它可以在加載網站頁面時用新文本替換舊文本。

HTML代碼：

..

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

..

用“紅色”代替“喜歡”顏色的“綠色”，“藍色”，用“女性”代替“男性”。

當頁面將被加載時，我想看到，例如綠色（不是藍色）的眼睛和女性性別（不是男性）。

我想我需要使用下一個功能：

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

PS：代碼JSON直接在頁面中而不在文件中（../code.json）

用戶代碼：

// ==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);

它不起作用

有人可以幫助使用正確的代碼嗎？

Answer 1

首先stringify()你的JSON。

var stringified = JSON.stringify(json);

接下來，使用.replace() JavaScript String函數。

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

現在將您的JSON parse()到一個對象中。

var jsonObject = JSON.parse(stringified);

現在，您可以根據需要使用jsonObject 。

編輯：使用這些行而不是之前的.replace() 。

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

Answer 2

更准確的程序是使用正則表達式。

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

通過這種方式，你知道你正在為眼睛取代藍色而不是任何藍色（如最喜歡的顏色）。 正則表達式的'g'和'm'選項代表全局，它將導致搜索所有適用的匹配（如果你的json中有多個'眼睛'）和'm'代表多行。 如果您的字符串是多行的。

Answer 3

第一次迭代 - 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 })) 

第二次迭代 - 對ES Harmony來說很好

• 添加規則 - 添加嚴格的比較
• 添加匹配器 - 添加任何負責數據匹配/替換的功能

 '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')))) 

Answer 4

使用JSON.parse()和JSON.stringify()可以輕松完成JSON字符串操作。

下面給出了一個示例：

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);

現在tweetString具有更新的JSON對象。