// 修改富文本图片样式
// fixImgInRichText("<p><img src='' /></p>","width:100%")
fixImgInRichText(htmlSnip,style='') {
let regex1 = new RegExp('(i?)(\<img)(?!(.*?style=[\'"](.*)[\'"])[^\>]+\>)', 'gmi')
// 给不含 style="" 或 style='' 的 img 标签加上 style=""
htmlSnip = htmlSnip.replace(regex1, '$2 style=""$3')
// 正则匹配含有 style 的 img 标签
let regex2 = new RegExp('(i?)(\<img.*?style=[\'"])([^\>]+\>)', 'gmi')
htmlSnip = htmlSnip.replace(regex2, `$2${style}$3`)
return htmlSnip
}
// 防注入(html、script强制显示)
htmlEncode(str){
var ele = document.createElement('span');
ele.appendChild(document.createTextNode(str));
return ele.innerHTML;
},
//解析(强制显示的返回)
htmlDecode (str) {
var ele = document.createElement('span');
ele.innerHTML = str;
return ele.textContent;
},
// 识别网址
getHtml(value,index=0){
let valueArray=value.split('\n');
let valueAtring=valueArray.join('<br>')
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
let url=valueAtring.replace(reg,'$1$2')
return valueAtring.replace(reg, "<a style=' color: #5cadff !important;' id='toA_"+index+"' target='_Top,_Blank' href='$1$2' url='$1$2'>$1$2</a>")
},
//清除富文本html
clearHtml(str){
let regex = /(<([^>]+)>)/ig
return str.replace(regex, "").replace(/ /gi, "");
}
文本输入,js防注入,识别网址,清除富文本html,修改富文本图片样式
于 2022-06-06 15:48:31 首次发布
本文介绍如何使用JavaScript函数fixImgInRichText修改富文本中的图片样式,确保所有img标签采用一致的宽度,并处理了不同情况下的style属性。通过正则表达式实现,适用于HTML内容的编码和URL识别。
摘要由CSDN通过智能技术生成