正则去掉富文本中的标签,把img标签替换成成alt中的内容

86 阅读1分钟
  • 应用场景: 处理聊天中的文本信息,需要在列表页面展示,最好去掉标签信息,才能更好的自定义样式
/**
         * 提取富文本字符串某个标签的所有属性
         * @param {String} htmlString 要提取的html富文本
         * @returns {String} 替换了img属性的alt标签,去掉html标签
         */
        function removeImgAltAttributes(htmlString) {
            let regImg =/<img.*?src=[\"|\']?(.*?)[\"|\']*?>/g
            let regAlt = /(.*?)<img.+?alt=('|")(.*?)\2.*?>([^<]*)/g;
            let newString = htmlString.replace(/<img[^>]*alt="[^"]*"[^>]*>/gi, function(match) {
                return match.replace(regImg,  regAlt.exec(htmlString)[3]);
            });
            return newString.replace(/<[^>]+>/g, '');
        }
        // 示例使用
        var str = '<p>Some text</p><img src="image1.jpg" alt="Image1"><img src="image2.jpg" alt="Image2"><p>333333333</p><p><p style="color: #f00"></p>Some more text</p><img src="image2.jpg" alt="Image3">23424232'
        const cleanedHtml = removeImgAltAttributes(str);
        console.log(cleanedHtml) //=>Some textImage1Image2333333333Some more textImage323424232