富文本样式修改 标签

vue3.xxx

:deep(.el-scrollbar__view){
  padding-bottom: 50px!important;
}

vue2.xxx

/deep/.vue-head{
}

>>>

::deep .vue-head{
}

content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {         
  console.log(capture);
});
//upfile/2006/0115/1590997979404056911.jpg
//upfile/2006/0209/1591061098210007976.jpg
//upfile/2006/0209/1591061098200080612.jpg

if(res.matter.indexOf('img')!=-1){ //判断img是否存在
  var result = content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match,capture) {
  console.log(capture);
  return '<img src=' + app.host.substr(0,app.host.length-1) + capture+' style="max-width:100%;height:auto;display:block;margin:10px 0;"/>';
        });
        console.log(result);
 
}
//<p>看看文章里的图片上传后能不能加载出来</p><p><img src=host地址/upfile/2006/0115/1590997979404056911.jpg style="max-width:100%;height:auto;display:block;margin:10px 0;"/></p><p>多张图片多张图片多张图片多张图片多张图片多张图片多张图片多张图片</p><p>多张图片多张图片多张图片多张图片多张图片多张图片多张图片</p><p>多张图片多张图片多张图片多张图片多张图片多张图片</p><p>多张图片多张图片多张图片多张图片多张图片</p><p>多张图片多张图片多张图片</p><p><img src=host地址/upfile/2006/0209/1591061098210007976.jpg style="max-width:100%;height:auto;display:block;margin:10px 0;"/></p><p><img src=host地址/upfile/2006/0209/1591061098200080612.jpg style="max-width:100%;height:auto;display:block;margin:10px 0;"/></p><p><br/></p>

获取a标签href内容

<a.+?href=\"(.+?)\".*>(.+)</a>
单独href ： <a.+?href=\"(.+?)\".*>
单独连接文字：>(.+)</a>

获取a标签内容

res.result.match(/<a\b[^>]+\bhref="([^"]*)"[^>]*>([\s\S]*?)<\/a>/g)

/*获取字符串a标签中的href方法*/
var str = document.querySeletor("a");
function getLinkUrl(str){
    var a = str;
    var arrLink = [];
    a.replace(/<a [^>]*href=['"]([^'"]+)[^>]*/gi,function(match,capture){
        arrLink.push(capture)
    });
    if (arrLink != null && arrLink.length > 0) {
        return arrLink;
    }
}
getLinkUrl(str)

获取 >请求

  item.replace(/>([\s\S]*?)<\/a>/gi, function (match, capture) {
            // console.log(match,capture)
            hreft.push(capture)
          });

获取href的内容

  item.replace(/<a\b[^>]+\bhref="([^"]*)"[^>]*>/gi, function (match, capture) {
            // console.log(match,capture)
            hrefl.push(capture)
          });

1.利用全局样式进行限制(在基础样式里添加)

img{
min-max:100%
}

2.利用正则表达式进行正则匹配

         //默认heigh属性置零
         richtext.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
         //默认的width属性置零 
         .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
         //将style属性置零
         .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
         //将alt属性置零
         .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
         //设置属性
         .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="width: 100%;"');
         //p标签的行内样式重置
         .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
         .replace(/<p>/ig, '<p style="font-size: 15Px; line-height: 25Px;">')
         //保留其他属性 对style进行覆盖
         replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1 style="max-width:100%;"')

3.对于vue还可以使用深度选择器

 <div class="rich-text" v-html="reiHtext"></div>
 
 <style>
	.rich-text>>> img {
	  width: 100%;
	}
</style>

方法1：

function setContent(str) {
str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
str.value = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
return str;
}

方法1优化：

function removeHTMLTag(str) {
    str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
    str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
    str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
    str=str.replace(/&nbsp;/ig,'');//去掉&nbsp;
    return str;
}

方法2：

//去除html标签
function deleteHtmlTag(str){
 str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim();//去掉所有的html标签和&nbsp;之类的特殊符合
 return str;
}

方法3：

description.replace(/<(?!img).*?>/g, "");  
 
//如果保留img,p标签，则为：
description.replace(/<(?!img|p|/p).*?>/g, ""); 
如有错误，欢迎指出。

参考:https://blog.csdn.net/M82_A1/article/details/90412673

1.全局css 写入 插入后生效
2.正则匹配 修改 (加壳 修改)
3.使用富文wxParse-master