duanboniao5903 2014-10-13 05:06
浏览 384

我如何允许innerHTML的<img>和<a>标签,但没有其他标签? (制作论坛)

I am currently programming a forum using only javascript (No JQuery please). I am doing very well, however, there is one issue I would love help with.

Currently I am getting the post from a database, assigning it to variable MainPost, and then attaching it to a div via a text node:

     var theDiv = document.getElementById("MainBody");
     var content = document.createTextNode(MainPost);
     theDiv.appendChild(content);

This is working quite well, however, I would LOVE to be able to do this:

     document.getElementById("MainBody").innerHTML += MainPost;

But I know this would allow people to use ANY html tag they want, even something like "script" followed by javascript code. This would be bad for business, obviously, but I do like the idea of allowing posters to use the "img" tag as well as the "a href" tags. Is there a way to somehow disable all tags except these two for the innerHTML?

Thank you all so much for any help you can offer.

  • 写回答

1条回答 默认 最新

  • dongzhang0243 2014-10-13 06:19
    关注

    Ok, the first thought that came to my mind when I read this question was to find a regular expression to exclude a specific string in a word. Simple search gave a lot of results from SO.

    Starting point - To remove all the HTML tags from a string (from this answer):

     var regex = /(<([^>]+)>)/ig
     ,   body = "<p>test</p>"
     ,   result = body.replace(regex, "");
    
     console.log(result);
    

    To exclude a string you would do something like this (again from all the source mentioned above):

    (?!StringToBeExcluded)
    

    Since you want to exlcude the <a href and <img tags. The suitable regex in your case could be:

    (<(?![\/]?a)(?![\/]?img)([^>]+)>)
    

    Explanation :

    Think of it as three capturing groups in succession:

    1. (?![\/]?a) : Negative Lookahead to assert that it is impossible to match the regex containing the string "a" prefixed by zero or one backslashes (Should take care of the a href tags)
    2. (?![\/]?img) : Same as 1, just here it looks for the string "img". I don't know why I allowed the </img> tag. Yes, <img> doesn't have a closing tag. You could remove the [\/]? bit from it to fix this.
    3. ([^>]+) : Makes sure to not match > zero or one times to take care of tags that have opening and closing tags.

    Now all these capture groups lie between < and >. You might want to try a regex demo that I've created incorporating these three capture groups to take care of ignoring all HTML elements except the image and link tags.

    Sidenote - I haven't thoroughly given this regex a try. Feel free to play around with it and tweak it according to your needs. In any case, I hope this gets you started in the right direction.

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题