含HTML标签的字符串子串样式设置问题及解决方案原理咨询

云原生阿岚

2026-7-25

问题解析：HTML标签输入无法正常显示的解决原理

问题场景

要把用户输入的文本存入USER_INPUT变量，作为多样式字符串的子串显示在DISPLAY容器中，但当输入包含<div>这类HTML标签时，内容无法正常显示，核心原因是innerText和innerHTML的特性差异。

原代码的问题

最初的实现代码：

var USER_INPUT = "<div>";
      
document.getElementById("DISPLAY").innerHTML =  
       "<span style='color:red'>" + "User Input : " + "</span>" + 
       "<span style='color:blue'>" + USER_INPUT + "</span>";

这段代码直接把USER_INPUT拼入innerHTML，当USER_INPUT是<div>时，浏览器会把它当作HTML标签解析，而不是普通文本——也就是说，这个<div>会被当成一个实际的DOM元素插入，而不是显示成字符串<div>，自然就看不到预期的文本内容。

解决方案的原理

你找到的可行代码：

var USER_INPUT = "<div>";
    
var XDIV = document.createElement("div");
XDIV.innerText = USER_INPUT;
var A = XDIV.innerHTML;
    
document.getElementById("DISPLAY").innerHTML =  
       "<span style='color:red'>" + "User Input : " + "</span>" + 
       "<span style='color:blue'>" + A + "</span>";

这里的核心逻辑是利用innerText和innerHTML的特性完成HTML转义：

当给XDIV.innerText赋值为<div>时，innerText的特性是：只识别纯文本，会自动把HTML特殊字符转义成实体字符——它会把<转成<，>转成>，把原始的<div>变成<div>，并作为文本内容存在XDIV里。
接着获取XDIV.innerHTML，此时拿到的是转义后的实体字符串<div>，而不是原始的<div>标签。
最后把这个转义后的字符串拼入DISPLAY的innerHTML中，浏览器会把<解析回<的文本形式显示，而不是当作HTML标签处理，这样就能正常显示用户输入的<div>文本，同时还能保留外层<span>的样式。