我在为JavaScript.replace方法寻找几个非常安全的regex模式。输入是一个序列化的DOM字符串,我想删除所有YUI3类名和YUI3生成的id属性。
var resourceDOMStr = Y.DataType.XML.format( Y.Node.getDOMNode(this.getIframeDOMContainer()).innerHTML );
alert('unsanitized markup:\n\n'+resourceDOMStr );
// Remove YUI-added id's and classes
// regex to remove ' id="*"'
// regex to remove entire class attr: ' class="'yui3-*'"'
// regex to remove className + trailing space: class="'yui3-* 'safeClass"
// regex to remove className + leading space: class="safeClass' yui3-*'"
resourceDOMStr.replace('', '');
alert('sanitized markup:\n\n'+resourceDOMStr );
所以,是的,我想清理并删除整个I d属性,其值将始终以“yui_3”开头,例如
id="yui_3_3_0_1_1296949124608175"
。另外,如果只有一个类是YUI3生成的类名,我想删除整个类属性,否则我只想删除YUI3类名和任何前导/尾随空格。生成的类名将始终以“yui3-”开头,例如;class="yui3-dd-shim"
class="safeClass yui3-dd-shim"
class="yui3-dd-shim safeClass"
…我不希望“safeClass”被更改,也不希望前导/尾随空格的累积,因为生成的替换字符串将被多次加载、清理和保存。
非常感谢你的头痛药。
丁
编辑:
<div id="wrap"><h1 id="yui_3_3_0_1_1296942015298202" class="yui3-dd-drop">Resource 1 Title</h1>
<p id="yui_3_3_0_1_1296942015298219" class="yui3-dd-drop">Lorem ipsum dolor sit amet, <a href="javacript:;" id="yui_3_3_0_1_1296942015298236" class="yui3-dd-drop">consectetur adipiscing</a> elit. Proin et sem leo, sed luctus nisi. Suspendisse pharetra iaculis laoreet. Pellentesque vulputate malesuada auctor. Integer laoreet ultricies nunc facilisis adipiscing.</p>
<div class="widget revealer">
<p>Revealer widget.</p>
<script type="text/javascript">
document.RevealerConfig = true;
</script>
</div>
<div class="widget quiz safeClass" id="safeId">
<p>Quiz widget.</p>
<script type="text/javascript">
document.QuizConfig = true;
</script>
</div>
<div class="snippet yui3-dd-drop" id="yui_3_3_0_1_1296942015298253">
Vestibulum fermentum, justo id porta suscipit, velit lorem hendrerit nisi, id tincidunt lectus ante quis lacus. Proin et erat sit amet turpis euismod dictum vitae a metus.
<div class="widget table">
<p>Table widget.</p>
<table width="80%" border="1">
<tbody><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody></table>
</div></div>
<p id="yui_3_3_0_1_1296942015298270" class="yui3-dd-drop">Proin et sem leo, sed luctus nisi. Suspendisse pharetra iaculis laoreet. Pellentesque vulputate; laoreet ultricies nunc facilisis adipiscing ultricies nunc.</p>
<div class="widget table">
<p>Table widget.</p>
<table width="80%" border="1">
<tbody><tr>
<td>1</td>
<td>
<ul>
<li>1</li>
<li>2<ul><li id="yui_2_0_0_1">nested</li></ul></li>
</ul>
</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="yui2-dd-drop yui3-dd-drop">7</td>
<td class="yui2-dd-drop yui3-dd-drop">8</td>
<td class="yui2-dd-drop yui3-dd-drop">9</td>
</tr>
</tbody></table>
</div>
</div>
希望上面的一切都是好的,不要太容易地把它分开-如下面的注释所述,它的示例html。
最佳答案
你可以试试这个怪物:
var dirty = 'class="yui3-dd-shim" class="safeClass yui3-dd-shim" class="yui3-dd-shim safeClass"';
var clean = dirty.replace(/class="yui[0-9]-[^\s]+"|\s?yui[0-9]-[^\s"]+\s?|id="yui_[0-9][^"]+"/gi, '');
在你的样本数据上做了测试,似乎完成了任务。