从innerHtml中为html字符串中的所有元素裁剪空格的JavaScript
从innerHtml中为html字符串中的所有元素裁剪空格的JavaScript
提问于 2018-09-16 23:17:42
我有一个如下的字符串：
<div> Here is some text </div>
<div>Here is some text </div>
<ul>
<li>test 1 </li>
<li> test 2</li>
<li> test 3 </li>
</ul>
<div> Here is some text </div>我需要遍历每个元素，并使用JavaScript修剪空格和任何前导或尾随的 实体，以便最终结果如下所示：
<div>Here is some text</div>
<div>Here is some text</div>
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
<div>Here is some text</div>为了提供更多背景，这是一个粘贴到WYSIWYG编辑器中的字符串。因此，我只是尝试在粘贴字符串时将其清理。我对JavaScript不是很在行，但是即使我使用Javascript中建议的方法:如何遍历页面上的所有DOM元素？文章中，我不确定如何在字符串中使用document.getElementsByTagName("*");。
使用@Bharata的答案进行更新，我可以使用以下内容完成清理：
var str = "<div> Here is some text </div>" +
"<div>Here is some text </div>" +
"<ul>" +
" <li>test 1 </li>" +
" <li> test 2</li>" +
" <li> test 3 </li>" +
"</ul>" +
"<div> Here is some text </div>";
var cleanHtml = cleanUp(str);
function cleanUp(content) {
var dom = document.createElement("div");
dom.innerHTML = content;
var elems = dom.getElementsByTagName('*');
for (var i = 0; i < elems.length; i++) {
if (elems[i].innerHTML) {
elems[i].innerHTML = elems[i].innerHTML.trim();
}
}
return dom.innerHTML;
}回答 1
Stack Overflow用户
发布于 2018-09-17 00:12:10
您必须获取所有文本节点并修剪内容：
var walker = document.createTreeWalker(
document.querySelector('#my-div'),
NodeFilter.SHOW_TEXT,
null,
false
);
var node;
while(node = walker.nextNode()) {
if(!node.previousSibling)
node.textContent = node.textContent.replace(/^( |\s)*/, '')
if(!node.nextSibling)
node.textContent = node.textContent.replace(/( |\s)*$/, '')
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52355525
复制相关文章
相似问题