如何对长链接正确使用addProperty()以显示短链接文本？

该需求可以在属性面板中直接实现，也可以通过addProperty()方法代码实现，具体操作如下：

属性面板配置方式 #

• 选中需要调整的目标链接元素，打开属性配置面板
• 找到链接对应的「显示文本」配置项，把默认填充的长链接地址修改为你需要的短文本（比如示例中的Link），保存后即可生效，点击仍然跳转原目标地址。

addProperty()代码实现方式 #

如果需要批量处理大量链接，可以通过添加自定义属性的方式统一配置，示例代码如下：

// 1. 获取目标链接元素
const targetLink = document.querySelector('a[href="对应长链接地址"]')
// 2. 给元素添加自定义属性存储链接配置
targetLink.addProperty('linkConfig', {
  targetUrl: 'https://en.wikipedia.org/wiki/Autodesk_Media_and_Entertainment',
  displayText: 'Link'
})

// 3. 页面渲染时读取配置替换显示内容
const linkConfig = targetLink.getProperty('linkConfig')
targetLink.textContent = linkConfig.displayText
targetLink.href = linkConfig.targetUrl

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