如何允许<img/>和<a> tags for innerHTML, but no others? (Making a forum)</a>

时间:2014-10-13 05:06:39

标签: javascript php innerhtml

我目前正在使用javascript(请不要JQuery)编写论坛。我做得很好,但有一个问题我很乐意帮忙。

目前我从数据库获取帖子,将其分配给变量MainPost,然后通过文本节点将其附加到div:

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

这很有效,但是,我很乐意能够做到这一点:

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

但我知道这可以让人们使用他们想要的任何html标签,甚至可以使用&#34; script&#34;其次是javascript代码。显然,这对商业来说是不利的,但我确实喜欢允许海报使用&#34; img&#34;标签以及&#34; a href&#34;标签。有没有办法以某种方式禁用除了这两个以外的所有标签用于innerHTML?

非常感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:0)

好的,我在阅读这个问题时首先想到的是找到一个正则表达式来排除单词中的特定字符串。简单搜索提供了a lot of results from SO

起点 - 要从字符串(from this answer)中删除所有HTML标记:

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

 console.log(result);

要排除字符串,您可以执行以下操作(同样来自上面提到的所有来源):

(?!StringToBeExcluded)

由于您想要了解<a href<img代码。你的案例中合适的正则表达式可能是:

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

说明:

将其视为连续三个捕获组:

  1. (?![\/]?a):否定前瞻声明无法匹配包含字符串的正则表达式&#34; a&#34;以零或一个反斜杠为前缀(应该处理a href标签)
  2. (?![\/]?img):与1相同,就在这里它会查找字符串&#34; img&#34;。我不知道为什么我允许</img>标记。是的,<img>没有结束标记。您可以从中删除[\/]?位来解决此问题。
  3. ([^>]+):确保不匹配>零次或一次以处理具有开始和结束标记的标记。
  4. 现在所有这些捕获组都位于<>之间。您可能希望尝试使用这三个捕获组创建的a regex demo来处理忽略除图像和链接标记之外的所有HTML元素。

    Sidenote - 我没有彻底考虑这个正则表达式。随意玩它并根据您的需要进行调整。无论如何,我希望这能让你开始朝着正确的方向前进。