如何用 Greasemonkey 的用户脚本替换 JSON 字符串中的文本

Posted 2023-05-08

【中文标题】如何用 Greasemonkey 的用户脚本替换 JSON 字符串中的文本

【英文标题】：How can I replace the text in JSON string with a userscript for Greasemonkey

【发布时间】：2015-03-31 13:55:35

【问题描述】：

我想在不使用jQuery的情况下在Firefox中为Greasemonkey创建一个用户脚本，它可以在加载网站页面时用新文本替换旧文本。

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

没用

有人可以帮助编写正确的代码吗？

【问题讨论】：

这部分是你的脚本还是页面本身？

您尝试过什么？为什么您猜测您需要使用这些功能？

@vishalsharma 这部分在页面上。

@paul 因为我在网上看了？

这只是一个对象，所以你可以使用 unsafeWindow.page.btn.eye = "green";

【参考方案1】：

首先 stringify() 你的 JSON。

var stringified = JSON.stringify(json);

接下来，使用.replace() javascript 字符串函数。

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

现在parse()你的JSON变成一个对象。

var jsonObject = JSON.parse(stringified);

现在，您可以随意使用jsonObject。

编辑：使用这些行代替之前的 .replace()s。

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

【讨论】：

我可以使用正则表达式吗？像 /"eye": "(d+)"/g 替换 "eye": "green"，因为如果我有 "favorite_color": "blue" 我们可以看到 2 次相同的颜色。

你可以，但我认为.replace() String 函数现在更直接，因为它无论如何都是在 JavaScript 中提供的。如果你愿意，你也可以使用 RegEx。

【参考方案2】：

更准确的程序是使用正则表达式。

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

这样你就知道你正在用蓝色代替眼睛，而不是任何蓝色出现（比如最喜欢的颜色）。 正则表达式的“g”和“m”选项代表全局，这将导致搜索所有适用的匹配项（如果您的 json 中有多个“眼睛”），“m”代表多行。如果你的字符串是多行的。

【讨论】：

我无法像这样替换它

【参考方案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'))))

【参考方案4】：

JSON 字符串操作可以通过JSON.parse() 和JSON.stringify() 轻松完成。

下面给出一个示例：

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 对象。