有偿帮忙写一段js 正则

Question

是想用户可以发布链接和图片,但是不能发送html和css样式!

目前的写法是:

var result=str.replace(/(<\/?)([a-z]+)(\s[\w\W]*?)?(>)/ig,function(s0,s1,s2,s3,s4) {
   if (!/^(img|a)$/.test(s2))
  return "";
  if(s3)
  s3 = s3.replace(/\s+(id|class|style)(=(([\"\']).*?\4|\S*))?/g,"");
  return s1+s2+(s3||"")+s4;
});

这样是可以的 但是如果用户发布了 < 或者 > 这些就会被替换成html实体;

求大神写一段 可以以发布链接和图片,但是不能发送html和css样式,但是可以发布 < > 这样的字符

Answer 1

var result = str.replace(/<.*?>/g, function(v) {
  if(!/<(img|a|\/a)/g.test(v)){
    return '';
  }
  return v.replace(/\s+(id|class|style)\s*=\s*['"].*?['"]/ig,'')
      .replace('<', '{~~').replace('>', '~~}');
})
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\{~~/g, '<')
.replace(/~~\}/g, '>');

Answer 2

就是把一段文本中除了a或者img以外的所有标签都干掉，然后干掉a以及img中的css？
如果我没有理解错的话，大致是这样的：

(() => {
  let str = `
  <p style="color: blued">text</p>
  <img src="XXX" style="color: red" />
  <a href="XXX" style="color: red" >Link</a>
  <p>text</p>
  `

  // 逻辑分两块：
  // 1. 将非`img`、`a`标签的tag替换为转义符
  // 2. 将`img`、`a`标签中的`style`干掉

  let text = str.replace(/<(\/?)([\w]+)(.*?)(\/?)>/g, (_, selfClosing, tag, content, closing) => {
    if (['img', 'a'].includes(tag.toLowerCase())) {
      return `<${selfClosing}${tag}${content.replace(/style=".*?"/g, '')}${closing}>`
    } else {
      return `&lt;${selfClosing}${tag}${content}${closing}&gt;`
    }
  })

  console.log(text)
})()

如果对的话，也别什么有偿了，觉得对你有帮助的话，点个follow也是极好的：https://github.com/Jiasm

Answer 3

/<(?:(?:div|select|label|volist|option)|/|html|meta|script |head|form |ul|li|input |a|br|t )[^>]+>/g