Как удалить определенные стили из HTML-страницы?

0

Приложение использует 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, но кажется, что было бы огромной болью даже подумать о том, чтобы изменить это, чтобы сделать это.

  • 3
    Определенно не используйте регулярные выражения. Просто проанализируйте как HTML, посетите каждый узел, удаляющий тег стиля, и снова сериализуйте.
  • 0
    @JanDvorak: Можете ли вы объяснить это немного больше, пожалуйста? В частности, часть «посещение каждого узла».
Показать ещё 9 комментариев
Теги:

4 ответа

1
Лучший ответ

Вы можете удалить все стили границ из любого элемента, изменив этот элемент

.style.border

в

null

Например:

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>
Поделиться
  • 0
    Спасибо, глядя на это, а также решение.
  • 0
    Это ответ, который оказался для меня самым полезным, спасибо.
Показать ещё 3 комментария
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 на них, что упрощает управление стилями. Ниже представлено потенциальное решение для посещения всех узлов. Я решил не писать рекурсивно, потому что мне лично не нравится рекурсия.

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>

Это просто демо-страница, которая динамически загружается в div, но это будет работать со всеми элементами, а не только с div.

Поделиться
  • 0
    Спасибо за ответ. Я никогда не перебирал узлы html прежде, поэтому выяснял, как это сделать. Вернусь, чтобы принять ответ, как только я это выясню.
  • 0
    Правильный способ анализа HTML - это DOMParser . Просто помещать его в DIV небезопасно из-за тегов сценария, атрибутов onevent и тому подобного.
Показать ещё 6 комментариев
1

Вы можете сделать это с помощью css

скажем, у вас есть переменная html в области видимости, и вы связываете ее таким образом

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

просто оберните его вокруг div с помощью разделительных strip-borders класса

<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/

Поделиться
-3

вы можете сделать это с помощью $.css("background-color", "");

Поделиться
  • 0
    угловой, не JQuery
  • 0
    @iismathwizard - это относительно небольшая проблема с этим ответом.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню