如何从HTML页面剥离特定样式？
[英]How to Strip Specific Styles From Html Page?
问题描述
Application uses angularJs if that's relevant. 
如果相关，应用程序将使用angularJs。
We allow the user to generate custom html and then show it in a preview window. 我们允许用户生成自定义html，然后在预览窗口中显示它。 For example, the user enters the following: 例如，用户输入以下内容：
<div style = "background-color:red; border: 1px solid;">Hi there</div>
My goal, specifically, is to take this html (I get it as a string) and strip all border styles, so take above as an argument and return: 具体来说，我的目标是采用此html（我以字符串的形式获取）并去除所有边框样式，因此将上述作为参数并返回：
<div style = "background-color:red;">Hi there</div>
What's the best way to approach it? 最好的解决方法是什么？ RegEx or is there some other solution. RegEx还是有其他解决方案。 I have thought about ng-sanitize, but it seems like it would be a huge pain to even think about modifying it to do this. 我已经考虑过ng-sanitize，但考虑甚至对其进行修改似乎也很痛苦。
4 个解决方案
解决方案1
1 2015-12-03 18:37:37
You should not have to use regex for this. 您不必为此使用正则表达式。 Please don't even try as it's just not the right way. 请不要尝试，因为这不是正确的方法。
var div = document.createElement('div');
div.innerHTML = myHtmlString;
//recursively visit all nodes in div
//and remove border style elem.style.removeProperty('border');
To provide a little more context on this since I didn't really describe how to do the recursive border removal: 为了提供更多的上下文信息，因为我没有真正描述如何执行递归边界移除：
You create the div and set the string as div.innerHTML because it will allow you to perform DOM functions on them making it easier to manipulate the styles. 您创建div并将字符串设置为div.innerHTML因为它将允许您在它们上执行DOM函数，从而更易于操作样式。 A potential solution to visit all nodes is below. 下面是访问所有节点的潜在解决方案。 I chose to not write it recursively because I personally don't like recursion. 我选择不递归地编写它，因为我个人不喜欢递归。
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); }
<html> <body onload="load()"> </body> </html>
This is just a demo page that dynamically loads in divs but this would work with all elements, not just divs. 这只是一个演示页面，可在div中动态加载，但这将适用于所有元素，而不仅仅是div。
解决方案2
1 2015-12-03 18:48:45
You can do that with css also 您也可以使用CSS
let's say you have a variable html in scope, and you bind it this way 假设您在作用域中有一个html变量，并且以这种方式绑定它
<div ng-bind-html="html"></div>
just wrap it around a div with class strip-borders 只需将其与具有类strip-borders的div环绕即可
<div class="strip-borders">
<div ng-bind-html="html"></div>
</div>
and then add following class to remove borders form div 然后添加以下类以除去边框div
.strip-borders div {
border:none !important;
}
or remove borders from any element (use cautiously) 或删除任何元素的边框（谨慎使用）
.strip-borders * {
border:none !important;
}
See the fiddle 看到小提琴
解决方案3
1 已采纳 2015-12-03 18:56:07
You can strip all the border styles from any element by changing that element's 您可以通过更改元素的边框来去除任何元素的所有边框样式
.style.border
to 至
null
For example: 例如：
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);
<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>
解决方案4
-3 2015-12-03 18:34:38
您可以使用$ .css（“ background-color”，“”）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.