5

当用户创建消息时，会有一个 multibox 并且这个 multibox 连接到一个设计面板，允许用户更改字体、颜色、大小等。提交消息时，如果用户更改了颜色，则消息将显示为 html 标签，字体大小等。

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

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

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

标签内的属性<img>不会被删除也很重要。可以这样播放：

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

我怎样才能用javascript完成这个？

我曾经使用以下代码隐藏 C# 代码，它运行良好，但它会剥离除标签之外的所有 html 标签<br>。

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

非常感谢任何形式的帮助

4

4 回答 4

9

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

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

基本上选择除 a、img、br 之外的所有内容，并用它们的内容替换它们。

于 2013-08-08T14:13:11.907 回答
3

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上例中的两个 s）。

因为 jQuery 最先到达最外面div，它的innerHTML, 其中 containsspan被保留了。

此答案$('#container').find('*:not(br,a,img)').contents().unwrap()无法处理内容为空的标签。

一个可行的解决方案很简单：从最内部的元素向外部循环：

var $elements = $s.find("*").not("a,img,br");
for (var i = $elements.length - 1; i >= 0; i--) {
    var e = $elements[i];
    $(e).replaceWith(e.innerHTML);
}

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

于 2015-01-04T10:09:23.643 回答
2

使用 jQuery，您可以找到所有不需要的元素 - 然后使用 unwrap 去除标签

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

FIDDLE

于 2013-08-08T14:14:10.567 回答
0

我认为提取到好的标签会更好。匹配几个标签比删除元素的其余部分和所有 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);
于 2013-08-08T15:27:44.467 回答