karamay_wx/utils/htmlProcessor.js

/**
 * HTML内容处理工具 - 小程序版本
 * 用于处理富文本内容中的格式问题
 */

/**
 * 处理HTML内容
 * @param {string} htmlContent - 原始HTML内容
 * @returns {string} 处理后的HTML内容
 */
function processHtmlContent(htmlContent) {
  if (!htmlContent) return ''

  let processedContent = htmlContent

  // 1. 处理段落中的前导空格，转换为缩进
  processedContent = processedContent.replace(/<p>\s+([^<]*)<\/p>/g, '<p class="indent">$1</p>')

  // 2. 处理段落内部的多个连续空格
  processedContent = processedContent.replace(
    /<p>([^<]*?)\s{2,}([^<]*?)<\/p>/g,
    '<p><span class="indent-text">$1</span>$2</p>',
  )

  // 3. 处理图片容器，添加统一的样式类
  processedContent = processedContent.replace(
    /<div class="media-wrap image-wrap"><img src="([^"]*)"/g,
    '<div class="media-wrap image-wrap processed-image"><img src="$1" class="content-image"',
  )

  // 4. 处理音频容器（如果有的话）
  processedContent = processedContent.replace(
    /<div class="media-wrap audio-wrap">/g,
    '<div class="media-wrap audio-wrap processed-audio">',
  )

  // 5. 处理视频容器（如果有的话）
  processedContent = processedContent.replace(
    /<div class="media-wrap video-wrap">/g,
    '<div class="media-wrap video-wrap processed-video">',
  )

  // 6. 移除空的段落标签
  processedContent = processedContent.replace(/<p><\/p>/g, '')

  // 7. 处理图片的alt属性
  processedContent = processedContent.replace(
    /<img([^>]*?)src="([^"]*?)"([^>]*?)\/?>/g,
    '<img$1src="$2" alt="内容图片" loading="lazy"$3/>',
  )

  return processedContent
}

/**
 * 获取处理HTML内容的CSS样式类名映射
 * @returns {object} 样式类名映射对象
 */
function getHtmlContentStyleClasses() {
  return {
    indent: 'html-indent',
    indentText: 'html-indent-text',
    processedImage: 'html-processed-image',
    contentImage: 'html-content-image',
    processedAudio: 'html-processed-audio',
    processedVideo: 'html-processed-video',
    mediaWrap: 'html-media-wrap'
  }
}

module.exports = {
  processHtmlContent,
  getHtmlContentStyleClasses
}