使用正则表达式替换字符串的一部分

Question

我有一个用字符串包裹的脚本，如下所示：

<script async defer>
          {
            "height": "800",
            "c": "d",
            "e": "f",
            "g": "h"
            ...
          }
 </script>

我正在寻找一种改变内部对象属性的方法。

语境：

该脚本被传递给一个 React 组件。 如果传入了一个 scale 属性，组件应该在对象内部找到 height 属性，计算比例，并用新的缩放高度替换它。

例如

<Component 
  script="<script>
          {
            "height": "800",
            "c": "d",
            "e": "f",
            "g": "h"
            ...
          }
  scale=.5
  </script>

应该将字符串更改为：

<script>
          {
            "height": "400",
            "c": "d",
            "e": "f",
            "g": "h"
            ...
          }
</script>

Answer 1

这是获取脚本内容的简单解决方案
然后在给定比例的高度上运行替代品。
高度和比例必须存在才能使更改生效。

 var str = '<script async defer>' + "\\n" + ' {' + "\\n" + ' "height": "800",' + "\\n" + ' "c": "d",' + "\\n" + ' "e": "f",' + "\\n" + ' "g": "h"' + "\\n" + ' ...' + "\\n" + ' }' + "\\n" + ' scale=.5' + "\\n" + '<\\/script>' + "\\n" ; // console.log( "From:\\n" + str ); var fix = str.replace( /(<script(?:\\s+(?=((?:"[\\S\\s]*?"|'[\\S\\s]*?'|(?:(?!\\/>)[^>])?)+))\\2)?\\s*>)([\\S\\s]*?)(<\\/script\\s*>)/g, function(m,a,b,c,d) { var content = c; if ( content.length == 0 ) return m; content = content.replace( /{[\\S\\s]*?("\\s*height\\s*"\\s*:\\s*"\\s*)(\\d+)(\\s*"[\\S\\s]*?}[\\S\\s]*?)[^\\S\\r\\n]*scale\\s*=\\s*(\\d+(?:\\.\\d*)?|\\.\\d+)(?:\\r?\\n)?/, function(M,A,B,C,D) { var tdd = B * parseFloat(D); return A + tdd + C; }); return a + content + d; }); //console.log( "To:\\n" + fix ); console.log( fix );

Answer 2

您的字符串有一个开始和结束脚本标签和 ... JSON。

因此，您最好提取 JSON 部分，对其进行解析、操作，然后（如果确实需要）将结果放回脚本包装器中。

这是您可以使用的一些代码：

 function updateProp(str, key, value) { let [, before, json, after] = str.match(/^([^{[]*)([^]*[}\\]])([^]*)$/); let obj = JSON.parse(json); obj[key] = value; return before + JSON.stringify(obj) + after; } // Example use: let str = `<script async defer> { "height": "800", "c": "d", "e": "f", "g": "h" } scale=.5 <\\/script>`; str = updateProp(str, "height", "400"); console.log(str);

请注意，字符串中的空格会发生变化。 我认为这不是问题，因为它不会影响编码数据的含义/值。

代理对象

您可以创建一个代理，以便您可以与字符串进行交互，就好像它是一个对象，获取/设置其属性，并再次获取字符串版本（使用其<script>标记和其他内容）。

这是它的外观：

 function StringAsObject(str) { [, this.before, json, this.after] = str.match(/^([^{[]*)([^]*[}\\]])([^]*)$/); this.obj = JSON.parse(json); this.toString = () => this.before + JSON.stringify(this.obj) + this.after; return new Proxy(this, { get(that, prop) { return prop in that ? that[prop] : that.obj[prop]; }, set(that, prop, value) { return that.obj[prop] = value; } }); } // Example use: let str = `<script async defer> { "height": "800", "c": "d", "e": "f", "g": "h" } scale=.5 <\\/script>`; // Example use let obj = StringAsObject(str); // act on it as an object console.log(obj.height); // "800" obj.height = "400"; console.log(obj.toString()); // get the script version again.

尽管如此，这仍然感觉非常低效，最好直接处理对象，而不是处理此类字符串。