Question

应用程序使用angularJs，如果相关的话。

我们允许用户生成自定义html，然后在预览窗口中显示它。例如，用户输入以下内容：

<div style = "background-color:red; border: 1px solid;">Hi there</div>

我的目标，特别是，取这个html（我把它作为一个字符串）并删除所有边框样式，所以将上面作为参数并返回：

<div style = "background-color:red;">Hi there</div>

接近它的最佳方法是什么？ RegEx还是有其他解决方案。我已经考虑过ng-sanitize，但是考虑修改它来做这件事似乎是一件巨大的痛苦。

Answer 1

你不应该为此使用正则表达式。请不要尝试，因为它不是正确的方式。

var div = document.createElement('div');
div.innerHTML = myHtmlString;

//recursively visit all nodes in div
//and remove border style elem.style.removeProperty('border');

为了提供更多的上下文，因为我没有真正描述如何进行递归边界删除：

您创建div并将字符串设置为div.innerHTML，因为它允许您对它们执行DOM函数，从而更容易操作样式。访问所有节点的潜在解决方案如下。我选择不以递归方式写它，因为我个人不喜欢递归。

＆＃13;

function load()
{			
var contents = "<div style=\"border: 1px solid red; color: blue;\"><div style=\"border: 1px solid red; color: blue;\">test1</div><div style=\"border: 1px solid red; color: blue;\"><div style=\"border: 1px solid red; color: blue;\">test2</div><div style=\"border: 1px solid red; color: blue;\">test3</div></div><div style=\"border: 1px solid red; color: blue;\">test4</div></div>";

//before removing border
var beforeDiv = document.createElement('div');
beforeDiv.innerHTML = contents;
document.body.appendChild(beforeDiv);

//after removing border
var div = document.createElement('div');

div.innerHTML = contents;

//list of all nodes to visit
var nodesToVisit = new Array();

//load each child of div into this list
for(i = 0; i < div.children.length; i ++)
{
	nodesToVisit.push(div.children[i]);
}

//process entire list until we've exhausted all children
for(i = 0; i < nodesToVisit.length; i ++)
{
	var node = nodesToVisit[i];
	
	if(node != undefined)
	{				
		if(node.style != undefined)
		{
			//remove property of border
			node.style.removeProperty("border");
		}
		
		//add each child of node to list for processing. effectively recursive
		for(j = 0; j < node.children.length; j ++)
		{
			nodesToVisit.push(node.children[j]);
		}
	}
}

document.body.appendChild(div);
}

＆＃13;

<html>
	<body onload="load()">
	</body>
</html>

＆＃13;

这只是一个动态加载div的演示页面，但这适用于所有元素，而不仅仅是div。

Answer 2

你也可以用css

来做到这一点

让我们说你在范围内有一个变量html，然后用这种方式绑定它

<div ng-bind-html="html"></div>

只需将其包裹在类strip-borders

的div中

<div class="strip-borders">
    <div ng-bind-html="html"></div>
</div>

然后添加以下类来删除div格式

.strip-borders div {
    border:none !important;
}

或从任何元素中删除边框（谨慎使用）

.strip-borders * {
    border:none !important;
}

看小提琴

http://jsfiddle.net/8vzq9j6p/

Answer 3

您可以通过更改该元素来删除任何元素的所有边框样式

.style.border

到

null

例如：

＆＃13;

function stripBorderStyles() {
    var divs = document.getElementsByTagName('div');
    for (var i = 3; i < divs.length; i++) {
        divs[i].style.border = null;
    }
}

window.addEventListener('load',stripBorderStyles,false);

＆＃13;

<h2>Before:</h2>
<div style = "background-color:red; border: 1px solid;">Hi there</div>
<div style = "background-color:red; border: 2px solid;">Hey there</div>
<div style = "background-color:red; border: 3px solid;">Howdy</div>

<h2>After:</h2>
<div style = "background-color:red; border: 1px solid;">Hi there</div>
<div style = "background-color:red; border: 2px solid;">Hey there</div>
<div style = "background-color:red; border: 3px solid;">Howdy</div>

＆＃13;

Answer 4

你可以这样做 $ .css（＆＃34; background-color＆＃34;，＆＃34;＆＃34;）;

如何从Html页面中删除特定样式？

4 个答案: