使用 Tampermonkey 脚本插入 HTML 字符串

type

status

date

slug

summary

方案及结果

单行插入（Pass）

javascript


insert_html_list[0] = `<div class="top250"><span class="top250-no">No.${foundPodcast.rank}</span><span class="top250-link"><a href="${foundPodcast.links[0].url}" title="中文播客榜">中文播客榜</a></span></div>`;

缺点：非常不直观。

数组拼接法（Pass）

javascript


insert_html_list[0] = [
  '<div class="top250">',
    '<span class="top250-no">',
      `No.${foundPodcast.rank}`,
    '</span>',
    '<span class="top250-link">',
      `<a href="${foundPodcast.links[0].url}" title="中文播客榜">`,
        '中文播客榜',
      '</a>',
    '</span>',
  '</div>'
].join('');

优点：可被 code formatter 识别并进行 code formatting。

缺点：Code formatting 之后缩进全部消失，不够直观。

使用多行字符串（Failed）

javascript


insert_html_list[0] = `
  <div class="top250">
    <span class="top250-no">
      No.${foundPodcast.rank}
    </span>
    <span class="top250-link">
      <a href="${foundPodcast.links[0].url}" title="中文播客榜">
        xyzrank
      </a>
    </span>
  </div>
`;

使用 `.trim()` 清除首尾空格（Failed）

javascript


insert_html_list[0] = `
  <div class="top250">
    <span class="top250-no">
      No.${foundPodcast.rank}
    </span>
    <span class="top250-link">
      <a href="${foundPodcast.links[0].url}" title="中文播客榜">
        xyzrank
      </a>
    </span>
  </div>
`.trim(); // 关键：移除首尾空白

使用反斜杠取消换行（紧凑格式）（Failed）

javascript


insert_html_list[0] = `\
  <div class="top250">\
    <span class="top250-no">\
      No.${foundPodcast.rank}\
    </span>\
    <span class="top250-link">\
      <a href="${foundPodcast.links[0].url}" title="中文播客榜">\
        xyzrank\
      </a>\
    </span>\
  </div>`;

方案及结果

单行插入（Pass）

javascript

数组拼接法（Pass）

javascript

使用多行字符串（Failed）

javascript

使用 .trim() 清除首尾空格（Failed）

javascript

使用反斜杠取消换行（紧凑格式）（Failed）

javascript

使用 `.trim()` 清除首尾空格（Failed）