.replace() 无法在 JavaScript 中为 Google 标签管理器转义反斜杠

Question

我正在尝试将架构动态填充到我公司的博客文章中。大多数事情都工作得很好，但是 URLs，出于某种原因，每个 / 后面都有转义字符。示例在架构标记中用下面的“**”表示

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "HHHunts Commitment To RVA",
  "image": "",  
  "author": {
    "@type": "Organization",
    "name": "HHHunt"
    "url": "https://hhhunt.com"
  },  
  "publisher": {
    "@type": "Organization",
    "name": "HHHunt",
    "logo": {
      "@type": "ImageObject",
      **"url": "https:\/\/assets-global.website-files.com\/61d6f3d648b8c96670b238ab\/61d86f26213077625ab3a90e_logo-130.png"**
    }
  },
  "datePublished": "2022-03-28",
  "articleBody": "When ... ‍", // shortened
  **"thumbnailUrl": "https:\/\/assets-global.website-files.com\/61d6f3d648b8c989b9b238c0\/624311d33025d92e76fb34b9_Habitat-for-Humaity-(2).jpg",**
  "timeRequired": "PT3M",
  "description": "Growing up in Richmond, VA, Harry H. Hunt, III has always held a special place in heart for RVA and made a commitment to supporting and investing in the region.",
}
</script>

我替换转义字符的代码是：

function() {
  var postUrl = document.getElementsByClassName('schema-blog-image')[0].innerText;
  var cleanPostUrl = postUrl.replace(/[\]/g,"")
  return cleanPostUrl;
}

其中 .schema-blog-image 是博客特色图片的 class 选择器。

在上面的 'url' 字段中，我可以使用 Google 跟踪代码管理器的 JavaScript 变量从HTML 使用相同的 class 名称。但是，当我尝试使用相同的 class 名称但对于“图像”使用上述函数时，它 returns 是一个空字符串（如上所示）。

一些谷歌搜索引导我尝试 return JSON.stringify(postUrl)（同时删除 cleanPostUrl 变量），但结果只是 \x22\x22。

当我在 W3 Schools Try It Yourself 编辑器上尝试上面的函数时，它运行得很好，所以我不确定还需要做什么才能使正则表达式工作。

None 替换了转义字符。

Answer 1

试试这个

 var cleanPostUrl= JSON.stringify(postUrl);
var data = JSON.parse(cleanPostUrl);

Answer 2

所以，我按照在 Moz.com

上找到的指南解决了这个问题

现在的标签代码如下所示：

<script>
  (function(){
    var data = {
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "headline": {{Post Title}},
      "image": {{Post Image}},
      "author": {
        "@type": "Organization",
        "name": "HHHunt",
        "url": "https://hhhunt.com"
      },  
      "publisher": {
        "@type": "Organization",
        "name": "HHHunt",
        "logo": {
          "@type": "ImageObject",
          "url": {{Logo}}
        },
      },
      "datePublished": {{ISO Date}},
      "articleBody": {{Post Content}},
      "thumbnailUrl": {{Post Image}},
      "timeRequired": "PT" + {{Duration}} + "M", // I had to adjust this line to allow a string concat using a variable
      "description": {{Meta Description}},
    }
    var script = document.createElement('script');
    script.type = "application/ld+json";
    script.innerHTML = JSON.stringify(data); 
    document.getElementsByTagName('footer')[0].appendChild(script); // write the script to my <footer> tag
  })(document);
</script>

我的变量只是原始元素属性（例如，图像是通过使用 DOM 元素变量获得的，针对我提供的 CSS 选择器，并使用 src 属性获取 URL).现在的不同之处在于，我的架构现在包含在函数内的一个变量中，我现在可以在其中将所有这些变量作为真正的字符串传递。从那里，我们可以创建一个 var 脚本，并使用它来创建一个具有我需要的属性的新脚本 HTML 元素，并将它插入到我需要的地方。

因为我能够在变量 'data' 本身中将这些变量用作真正的字符串，所以我不再需要担心转义字符。

希望这对其他人有帮助！

.replace() 无法在 JavaScript 中为 Google 标签管理器转义反斜杠

.replace() not working for escaping back slashes in JavaScript for Google Tag Manager

javascript

schema

json

google-tag-manager