HTML内嵌JS代码不执行反而作为页面文本输出问题排查

你已排查排除<div>标签未闭合的常见诱因，且异常在新增自定义filter()函数后出现，直接按以下优先级定位问题即可：

最高概率诱因：script标签被意外截断 #

浏览器解析HTML时对</script>的识别优先级远高于JS语法解析，只要你在新增的filter()代码里出现了未转义的</script>字符串，浏览器会直接判定当前脚本块在这个位置结束，后面所有JS代码都会被当做普通HTML文本渲染到页面。

典型错误写法：

<script>
function filter(list) {
  // 这里直接写</script>会被浏览器识别为脚本结束标记
  const errTip = "过滤规则生效，<script>标签内容不会执行</script>";
  return list.filter(/* 过滤逻辑 */)
}
// 后面的提交绑定逻辑从这里开始就会被当文本打印
document.querySelector('#submitBtn').addEventListener('click', submitHandler)
</script>

修复方式：把字符串内的</script>转义为<\/script>，或者拆分为字符串拼接形式"</scr" + "ipt>"即可。

次高概率诱因：提交逻辑错误通过innerHTML插入脚本内容 #

如果你的filter()函数用于处理用户提交的内容，检查提交回调里是否有把过滤后的内容（包含<script>片段）直接赋值给DOM节点的innerHTML属性：

• 通过innerHTML插入的<script>标签不会被浏览器当做脚本执行，只会作为普通文本节点渲染到页面，和你描述的现象完全一致
• 这类问题不需要排查标签闭合，直接检查提交逻辑里的DOM插入代码即可，普通文本插入请用textContent替代innerHTML

其他快速排查手段 #

• 先把你新增的filter()函数整段注释，重新触发提交，如果异常消失，问题100%出在你新增的这段代码里，逐行检查语法即可
• 打开浏览器开发者工具的元素面板，定位到被打印出来的JS文本位置，向上溯源最近的标签闭合节点，可以直接看到脚本标签是在哪个位置被意外截断的
• 查看浏览器控制台的语法报错：如果filter()函数里存在未闭合的引号、括号，导致JS解析器报错终止，后续未解析的代码也可能被浏览器当做普通文本渲染，控制台一般会抛出Unexpected token类的语法错误提示

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