使用JavaScript解析修改HTML字符串的a标签属性及文本并解决报错

报错原因 #

innerHTML是DOM元素的属性，不是可调用的函数，你原来的el.innerHTML(consentDataxString)写法错误，直接通过等号赋值即可：el.innerHTML = consentDataxString。

完整实现方案 #

不建议用正则匹配修改HTML，标签属性、格式的波动很容易导致匹配失效，直接用DOM解析的方式处理更稳定，完整代码如下：

// 自定义要追加的文本
const APPEND_TEXT = ' (ADD TEXT HERE)';

let consentDataxString: string = dataFromApi?.selectedData.toString() || '';
// 创建DOM解析器
const parser = new DOMParser();
// 把HTML字符串解析为DOM文档
const htmlDoc = parser.parseFromString(consentDataxString, 'text/html');

// 选中所有a标签遍历处理
htmlDoc.querySelectorAll('a').forEach(linkEl => {
  // 1. 缺少target="_blank"则添加
  if (linkEl.getAttribute('target') !== '_blank') {
    linkEl.setAttribute('target', '_blank');
  }
  // 2. 文本末尾追加指定内容
  linkEl.textContent = `${linkEl.textContent?.trim() ?? ''}${APPEND_TEXT}`;
});

// 把修改后的DOM转回HTML字符串
const resultHtml = htmlDoc.body.innerHTML;

替代实现（沿用你原有创建元素的写法） #

如果你不想用DOMParser，也可以修正原有写法实现需求：

const APPEND_TEXT = ' (ADD TEXT HERE)';
let consentDataxString: string = dataFromApi?.selectedData.toString() || '';

// 创建容器元素加载HTML
const container = document.createElement('div');
// 修正innerHTML赋值逻辑
container.innerHTML = consentDataxString;

container.querySelectorAll('a').forEach(linkEl => {
  if (linkEl.getAttribute('target') !== '_blank') {
    linkEl.setAttribute('target', '_blank');
  }
  linkEl.textContent = `${linkEl.textContent?.trim() ?? ''}${APPEND_TEXT}`;
});

const resultHtml = container.innerHTML;

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