如何用JS为<main>内换行文本包裹<p>标签并保留<img>元素

标签，但里面的元素必须保留原样，不能被

包裹，否则图片无法正常渲染。

示例HTML #

<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  <img src="img/testimg.jpg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>

当前错误脚本 #

var maintext = document.getElementsByTagName('main')[0]; // get the first (0th) <main> element

var arr = maintext.textContent.split(/[\r?\n]+/); // split the text inside into an array by newline
// regex matches one OR MORE consecutive newlines, which prevents empty <p></p> being captured

arr.forEach(function(part, index) {
  if (!this[index].includes("<img ")) {
    this[index] = "<p>" + this[index] + "</p>"; // wrap each paragraph with <p> tags
  }
}, arr);

var rejoined = arr.join("\r\n"); // join the array to remove commas, with newlines as separators
maintext.innerHTML = rejoined; // replace contents of our <main> element with the new text

问题分析 #

之前的方法完全行不通：

• textContent只会提取纯文本，直接忽略这类元素节点，导致处理后图片直接丢失；
• 试图通过判断字符串里是否包含<img 来跳过包裹完全无效，因为元素节点根本不会被转换成这种字符串形式。

最优解决方案 #

正确的做法是直接遍历

const main = document.querySelector('main');
const fragment = document.createDocumentFragment();

// 遍历main下的所有子节点
for (const node of main.childNodes) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    // 元素节点直接克隆后加入片段
    fragment.appendChild(node.cloneNode(true));
  } else if (node.nodeType === Node.TEXT_NODE) {
    // 处理文本节点：去除首尾空白
    const textContent = node.textContent.trim();
    if (textContent) {
      // 按换行分割段落，过滤空内容
      const paragraphs = textContent.split(/[\r?\n]+/).filter(para => para.trim());
      paragraphs.forEach(para => {
        const pTag = document.createElement('p');
        pTag.textContent = para.trim();
        fragment.appendChild(pTag);
      });
    }
  }
}

// 替换main的内容
main.innerHTML = '';
main.appendChild(fragment);