在字符串处理场景中，经常需要根据指定的偏移量在目标位置插入HTML标签，比如高亮搜索关键词、标记特定文本片段等。这类操作看似简单，实际执行时很容易因为偏移量计算错误、标签未转义等问题出现渲染异常。
核心操作逻辑
带偏移量的HTML标签插入，本质是先计算插入位置，再拼接原始字符串和标签内容，核心步骤分为三步：
- 校验偏移量的合法性，确保偏移量在字符串长度范围内
- 根据偏移量拆分原始字符串为前后两部分
- 按照顺序拼接前半部分、开标签、目标内容、闭标签、后半部分
以下是一个基础的实现示例，假设需要在字符串的指定偏移位置插入<em>标签来高亮内容：
/**
* 在字符串指定偏移位置插入HTML标签
* @param {string} str 原始字符串
* @param {number} offset 插入偏移量（从0开始）
* @param {string} tagName 标签名称，如em、strong
* @param {string} content 需要包裹的内容
* @returns {string} 插入标签后的字符串
*/
function insertHtmlTagByOffset(str, offset, tagName, content) {
// 校验偏移量合法性
if (offset < 0 || offset > str.length) {
throw new Error('偏移量超出字符串范围');
}
// 拆分字符串
const preStr = str.slice(0, offset);
const postStr = str.slice(offset);
// 拼接结果
return `${preStr}<${tagName}>${content}</${tagName}>${postStr}`;
}
// 使用示例
const originStr = '这是一段测试文本';
const result = insertHtmlTagByOffset(originStr, 2, 'em', '一段');
console.log(result); // 输出：这是<em>一段</em>测试文本
常见陷阱分析
偏移量计算未考虑已有标签长度
如果原始字符串中已经存在HTML标签，直接按照原始字符串的字符偏移量插入新标签，会导致位置偏差。比如原始字符串是<div>测试</div>，实际渲染时标签不占用显示字符，但字符长度计算时包含了标签的字符，此时偏移量需要排除已有标签的长度。
特殊字符未转义导致标签被误解析
如果插入的内容中包含<、>、&等特殊字符，没有提前转义的话，会被浏览器解析为HTML标签的一部分，破坏原有结构。比如插入的内容是a<b，未转义的话会被识别为标签开始，导致渲染错误。
多次插入偏移量未动态更新
当需要在同一个字符串中插入多个标签时，第一次插入后字符串长度会发生变化，后续的偏移量需要基于新的字符串长度重新计算，否则会出现位置偏移的问题。
优化策略
提前转义特殊字符
在插入内容前，先对内容中的特殊字符进行转义，避免被浏览器误解析。可以封装一个转义函数：
/**
* 转义HTML特殊字符
* @param {string} str 待转义的字符串
* @returns {string} 转义后的字符串
*/
function escapeHtmlSpecialChar(str) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return str.replace(/[&<>"']/g, (match) => map[match]);
}
动态更新偏移量
多次插入标签时，每次插入后记录新增的标签长度，后续偏移量加上之前新增的总长度，保证位置准确。示例：
let currentStr = '这是一段测试文本'; let totalAddedLength = 0; // 记录已插入标签的总长度 // 第一次插入，偏移量2 const tag1 = '<em>一段</em>'; const offset1 = 2 + totalAddedLength; currentStr = currentStr.slice(0, offset1) + tag1 + currentStr.slice(offset1); totalAddedLength += tag1.length; // 第二次插入，原始偏移量5，需要加上已新增的长度 const tag2 = '<strong>测试</strong>'; const offset2 = 5 + totalAddedLength; currentStr = currentStr.slice(0, offset2) + tag2 + currentStr.slice(offset2); console.log(currentStr); // 输出：这是<em>一段</em>测试<strong>测试</strong>文本
校验标签嵌套规则
插入标签时需要避免非法嵌套，比如不要在<em>标签内部插入<div>这类块级标签，也不要插入未闭合的标签。可以在插入前校验标签的合法性，确保开标签和闭标签匹配。
注意事项
如果插入的标签需要包含事件或者链接，在<pre>代码块内部可以使用<a>标签，比如插入带链接的高亮内容：
<a href="https://ipipp.com">跳转链接</a>
同时在操作过程中，不要将HTML标签名称直接写在正文描述中而不转义，比如提到<input>标签时，要写成<input>而不是<input>，避免被解析为实际标签。