如何从JavaScript对象获取content:encoded内容并在Pug页面正确显示？

你遇到的问题其实是Pug的点表示法没法处理带特殊符号的属性名——毕竟content:encoded里的冒号不属于合法的JavaScript标识符，直接用.访问肯定行不通。别担心，用方括号语法就能搞定，完全不需要额外的迭代操作。

核心解决方案：使用方括号访问属性 #

在JavaScript里，当属性名包含冒号、连字符这类特殊字符时，必须用方括号语法来精准定位属性，Pug完全支持这种原生的JS写法。针对你的场景：

• 要获取整个content:encoded数组，写：element['content:encoded']
• 要取数组里的第一个（也是你示例里唯一的）内容，写：element['content:encoded'][0]

如果要在Pug里渲染内容（注意content:encoded里包含HTML标签），记得用!=而非=，避免HTML被转义：

// 正确渲染content:encoded的原始内容
div!= element['content:encoded'][0]

为什么之前的写法失效？ #

你尝试的element.content|encoded不是合法的Pug/JavaScript语法，Pug会把它拆成content和encoded两个独立属性再用管道符拼接，自然取不到目标值。而方括号语法能明确指定完整的属性名，不管里面有什么特殊字符都能准确识别。

扩展场景：数组多元素的情况 #

要是你的content:encoded数组里有多个内容项，想要遍历输出的话，用Pug的each循环即可：

each contentItem in element['content:encoded']
  div!= contentItem

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