美文网首页
富文本编辑器设置图片的宽度为100%并修改图片的src属性

富文本编辑器设置图片的宽度为100%并修改图片的src属性

作者: 5cc9c8608284 | 来源:发表于2022-03-28 14:13 被阅读0次
    var reContent= content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,reSrc){
     
      //reSrc,返回每个匹配的字符串
      var newImg='<img src="http://127.0.0.1:8080'+reSrc+'" alt="" style="width:100%;" />';
      return newImg;
    });
    

    比如下面的案例:

      <script>
          var content =
            '<p>1111<img src="//exp-new.bdstatic.com/static/exp-pc/common-jquery/widget/search-box/img/logo_6115f97.png" alt="百度经验" /><img src="//exp-new.bdstatic.com/static/exp-pc/common-jquery/widget/search-box/img/logo_6115f97.png" alt="百度经验" /><img src="//exp-new.bdstatic.com/static/exp-pc/common-jquery/widget/search-box/img/logo_6115f97.png" alt="百度经验" /></p>';
          var reContent = content.replace(
            /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
            function (match, reSrc) {
              //reSrc,返回每个匹配的字符串
              var newImg =
                '<img src="http://127.0.0.1:8080' +
                reSrc +
                '" alt="" style="width:100%;" />';
              return newImg;
            }
          );
          console.log(reContent);
        </script>
    

    这样做的结果就是给每张图片加了一个style属性,并且修改了图片的src,结果如下:

    rich.png

    相关文章

      网友评论

          本文标题:富文本编辑器设置图片的宽度为100%并修改图片的src属性

          本文链接:https://www.haomeiwen.com/subject/znivjrtx.html