富文本图片回显地址处理

最新推荐文章于 2025-07-29 11:37:30 发布

原创最新推荐文章于 2025-07-29 11:37:30 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #javascript

detailObj.value = res.data;
    const regexImg = /<img[^>]+src="([^">]+)"/g;
    const regexVideo =
      /<video[^>]*>[\s\S]*?<source[^>]+src="([^">]+)"[^>]*>[\s\S]*?<\/video>/g;
    // 处理 img 标签
    detailObj.value.contentHtml = res.data.contentHtml.replace(
      regexImg,
      (match, src) => {
        const fullSrc = `${baseURLIMG}${src}`;
        match = match.replace(src, fullSrc);

        // 添加默认样式
        if (/style(?=\s|>)/.test(match)) {
          // 情况 1：style 属性存在但没有值
          match = match.replace(
            /style(?=\s|>)/,
            'style="width: 70%; display: block; margin: 10px auto;"'
          );
        } else if (/style="[^"]*"/.test(match)) {
          // 情况 2：style 属性存在且有值，不处理
          // 这里不需要做任何操作
        } else {
          // 情况 3：没有 style 属性，直接添加
          match = match.replace(
            /<img/,
            '<img style="width: 70%; display: block; margin: 10px auto;"'
          );
        }
        return `${match}`;
      }
    );