如何在JS中解码"等符号以处理PHP传入的HTML数据属性？

步骤1：获取目标元素及data属性值 #

先通过选择器拿到对应的DOM元素，再提取data-additional-color-data属性的内容：

// 获取目标元素
const colorContainer = document.querySelector('.field--name-field-pms-colors');
// 提取属性值（两种方式任选其一）
const encodedJson = colorContainer.getAttribute('data-additional-color-data');
// 或者用dataset（自动转换驼峰命名）
// const encodedJson = colorContainer.dataset.additionalColorData;

步骤2：解码HTML实体 #

属性值里的"是HTML的双引号转义实体，必须先解码成正常双引号，才能正确解析为JSON。推荐两种解码方法：

方法一：临时DOM元素解码

function decodeEntities(str) {
  const tempEl = document.createElement('div');
  tempEl.innerHTML = str;
  return tempEl.textContent;
}

const decodedJson = decodeEntities(encodedJson);

方法二：DOMParser解码

function decodeEntities(str) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(str, 'text/html');
  return doc.documentElement.textContent;
}

const decodedJson = decodeEntities(encodedJson);

步骤3：解析为JS对象并获取单个元素 #

把解码后的字符串解析成JavaScript对象，直接通过键名获取对应的数据：

// 解析JSON为对象
const colorData = JSON.parse(decodedJson);

// 获取ID为312的颜色数据
const targetColor = colorData['312'];
// 访问具体字段
console.log(targetColor.name); // 输出 "Black"
console.log(targetColor.hex);  // 输出 "#000000"
console.log(targetColor.src);  // 输出对应图片URL

内容的提问来源于stack exchange，提问作者nathan111777