如何使用JavaScript在指定<p>标签的特定位置插入<img>标签？

现有一段HTML字符串：

var txtstr='<p>Text 1</p><p>&nbsp;</p><p>Text &nbsp;2</p><p>&nbsp;</p><p>Text 3&nbsp;</p>';

需要把<img src="your-image-url.jpg"/>这类图片标签插入到第5个

标签内的第7个字符之后，规则是： 实体仅算作一个字符，不管出现多少次。

之前尝试的拆分代码无效：

const paragraphs = str.split("</p>")
const firstParagraph = paragraphs[5]+'</p>';

问题出在哪 #

1. 数组索引从0开始，第5个<p>对应的是数组的第4项（paragraphs[4]），不是paragraphs[5]
2. 直接按字符串长度计数时， 会被当成6个字符，没法准确定位到要求的位置

可行解决方案 #

var txtstr='<p>Text 1</p><p>&nbsp;</p><p>Text &nbsp;2</p><p>&nbsp;</p><p>Text 3&nbsp;</p>';
const imgTag = '<img src="your-image-url.jpg"/>';

// 1. 拆分并过滤出有效的<p>内容
const paragraphs = txtstr.split('</p>').filter(item => item.startsWith('<p>'));

// 2. 取出目标段落（第5个，索引为4），剥离<p>标签
let targetPara = paragraphs[4];
let content = targetPara.replace('<p>', '');

// 3. 把所有&nbsp;替换成单个占位符，统一字符计数规则
const placeholder = '█'; // 用一个不冲突的特殊字符当占位符
const processedContent = content.replace(/&nbsp;/g, placeholder);

// 4. 在第7个字符后插入图片标签
const insertPosition = 7;
const newContent = processedContent.slice(0, insertPosition) + imgTag + processedContent.slice(insertPosition);

// 5. 把占位符还原回&nbsp;，重新包装成<p>标签
const updatedPara = `<p>${newContent.replace(new RegExp(placeholder, 'g'), '&nbsp;')}</p>`;

// 6. 更新段落数组并拼接成最终字符串
paragraphs[4] = updatedPara;
const finalStr = paragraphs.join('</p>') + '</p>';

console.log(finalStr);

代码说明 #

• 用filter过滤拆分后的空内容，避免无效项干扰
• 替换 为单个占位符，确保字符计数完全符合要求，插入完成后再还原
• 严格对应数组索引，确保操作的是目标<p>标签

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