Regex replace函数未按预期更新DOM问题咨询

让我来帮你拆解下问题，你遇到的情况其实很典型——控制台能看到修改后的文本，但页面毫无变化，核心原因是你只修改了内存里的变量，没有把更新后的内容同步回DOM元素，另外还有几个细节需要调整：

核心问题：未将修改内容写回DOM #

你把元素的文本内容赋值给了inner变量，修改完inner后，并没有把它重新设置到页面元素上。更关键的是：

• 如果你要插入HTML标签（比如<b>），不能用innerText（它会把HTML标签当成普通字符串显示），必须用innerHTML来读取和设置内容，这样浏览器才会解析标签。

正则表达式的小陷阱 #

你当前的正则写法和test方法的使用有两个小问题：

1. 没必要用RegExp构造函数包裹正则字面量，直接写/([0-9]+AUD)/gi更简洁。
2. 带g全局修饰符的正则，调用test方法时会记录lastIndex（上次匹配结束的位置），多次调用时会从这个位置开始匹配，可能导致匹配结果不符合预期。其实你完全可以跳过test判断，直接用replace——它会自动处理所有匹配项，不需要提前检查。

冗余逻辑可以简化 #

你的res = 1和if(res === 1)属于完全冗余的代码，直接删掉就行，不影响功能。

修正后的代码 #

// 直接用正则字面量，更简洁
const regAUD = /([0-9]+AUD)/gi;

function checker() {
  // 获取所有p标签，用const声明变量避免全局污染
  const paragraphs = document.getElementsByTagName('p');
  
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].id = `${i}para`; // 模板字符串更优雅
    // 用innerHTML获取原始内容（含HTML结构）
    const originalContent = paragraphs[i].innerHTML;
    // 直接替换所有匹配项，不需要提前test
    const updatedContent = originalContent.replace(regAUD, '<b>$1</b>');
    // 把修改后的内容写回DOM，这一步才是页面更新的关键！
    paragraphs[i].innerHTML = updatedContent;
    
    console.log(updatedContent);
  }
}

额外优化建议 #

1. 用querySelectorAll替代getElementsByTagName：querySelectorAll返回静态的NodeList，不会在DOM变化时自动更新，避免循环中出现意外问题：

   const paragraphs = document.querySelectorAll('p');
   

2. 始终用let/const声明变量：你之前的str、i、inner都没有声明，会变成全局变量，容易和其他代码冲突。

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