Question

当用户创建消息时，有一个多箱，这个多箱连接到一个设计面板，让用户可以更改字体，颜色，大小等。当提交消息时，如果用户显示消息将带有html标签改变了字体的颜色，大小等。

注意：我需要设计面板，我知道可以删除它，但事实并非如此：）

这是一个Sharepoint标准，我唯一的解决方案是使用javascript在显示时剥离这些标记。用户应该只能插入链接，图像和添加换行符。

这意味着除<a></a>，<img>和<br>标签外，所有html标签都应该被剥离。

同样重要的是<img>标签内的属性不会被删除。它可以像这样显示：

<img src="/image/Penguins.jpg" alt="Penguins.jpg" style="margin:5px;width:331px;">

如何使用javascript完成此操作？

我以前使用以下代码隐藏的C＃代码，它完美地工作但它会删除除<br>标记之外的所有html标记。

public string Strip(string text)
{
   return Regex.Replace(text, @"<(?!br[\x20/>])[^<>]+>", string.Empty);
}

任何形式的帮助都很受欢迎

Answer 1

这样做你想要的吗？ http://jsfiddle.net/smerny/r7vhd/

$("body").find("*").not("a,img,br").each(function() {
    $(this).replaceWith(this.innerHTML);
});

基本上选择除a，img，br之外的所有内容，并将其替换为内容。

Answer 2

Smerny的答案很有效，只是HTML结构如下：

var s = '<div><div><a href="link">Link</a><span> Span</span><li></li></div></div>';
var $s = $(s);
$s.find("*").not("a,img,br").each(function() {
    $(this).replaceWith(this.innerHTML);
});
console.log($s.html());

实时代码在这里：http://jsfiddle.net/btvuut55/1/

如果上面有两个以上的包装器（上例中有两个div），就会发生这种情况。

因为jQuery首先到达div以外的最远，并且保留了包含innerHTML的{{1}}。

此答案span未能处理包含空内容的代码。

工作解决方案很简单：从最内层元素向外循环：

$('#container').find('*:not(br,a,img)').contents().unwrap()

工作副本为：http://jsfiddle.net/btvuut55/3/

Answer 3

使用jQuery，你可以找到你不想要的所有元素 - 然后使用unwrap来剥离标签

$('#container').find('*:not(br,a,img)').contents().unwrap()

FIDDLE

Answer 4

我认为提取好标签会更好。很容易匹配几个标签，而不是删除元素的其余部分和所有html的可能性。试试这样的东西，我测试了它并且工作正常：

// the following regex matches the good tags with attrinutes an inner content
var ptt = new  RegExp("<(?:img|a|br){1}.*/?>(?:(?:.|\n)*</(?:img|a|br){1}>)?", "g");
var input = "<this string would contain the html input to clean>";              
var result = "";

var match = ptt.exec(input);                
while (match) {
    result += match;
    match = ptt.exec(input);
}

// result will contain the clean HTML with only the good tags
console.log(result);

如何删除除<a></a>，<img/>（内部属性）和使用javascript的所有常规html标记？

4 个答案: