剥离所有br标签，直到下一个元素是文本节点Javascript或jQuery
剥离所有br标签，直到下一个元素是文本节点Javascript或jQuery
提问于 2018-06-11 05:03:31
假设我有这样的代码：：
<div class ="element">
<br>
<span>
<br>
<span>
<br>
text node
<br>
</span>
<br>
</span>
</div>
<div class ="element">
<br>
<span>
<br>
<br>
text node
</span>
</div>我想循环每个具有" element“类的元素，并删除所有的br br 标记，直到循环到达文本节点，然后停止删除，代码看起来像这样：
<div class ="element">
<span>
<span>
text node
<br>
</span>
<br>
</span>
</div>
<div class ="element">
<span>
text node
</span>
</div>更新
var stop2 = false;
var walk_the_DOM2 = function walk2(node, func) {
//func(node);
node = node.firstChild;
while (node && !stop2) {
walk2(node, func);
if(func(node)== true){
stop2 = true;
}
node = node.nextSibling;
}
};
$('.element').each(function(index, elem) {
var hh = elem;
stop2 = false;
walk_the_DOM2(hh, function(el) {
if(el.tagName =="BR"){
alert(el.tagName);
$(el).css('display', 'none');
}else if(el.tagName == undefined){
if($(el).text().replace(/^\s+|\s+$/g, '').replace(/(\r\n\t|\n|\r\t)/gm,"").length > 0){
alert($(el).text());
return true;
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<div class ="element">
<br>
<span>
<br>
<span>
<br>
text node
<br>
</span>
<br>
</span>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-11 16:33:01
节点
由于需要在DOM中引用元素和文本，因此我们将使用Node interface。在使用Node接口时，务必记住节点是一个元素、文本、注释、文档，甚至是空格。空白使得通过引用节点遍历DOM变得非常困难。下面的演示向我们展示了如何使用NodeLists，根据条件过滤出所需的元素，并正确处理textNodes和空格。
以下是Demo中使用的属性和方法列表：
演示
在演示中评论的详细信息
// Collect all .elements in a NodeList
var elements = document.querySelectorAll('.element');
/* for each .element...
|| Collect all of .element's <br>
*/
for (let i = 0; i < elements.length; i++) {
var brs = elements[i].querySelectorAll('br');
// for each <br> in the current .element...
for (let j = 0; j < brs.length; j++) {
// Find current <br>'s parent
var parent = brs[j].parentNode;
// Check what type of node is next after current <br>
var textCheck = brs[j].nextSibling.nodeType;
// if the next node is NOT a nodeType TEXT (3)...
if (textCheck !== 3) {
//... Remove the current <br>...
parent.removeChild(brs[j]);
} else {
/* ...but if the next node is a textNode,
|| use wsCheck function to see if it is only whitespace...
*/
if (wsCheck(brs[j].nextSibling)) {
//...if it is only whitespace then remove current <br>...
parent.removeChild(brs[j]);
/*...otherwise if it is a textNode with text
|| remove current <br>
|| break out of the inner for loop and continue to the
|| outer for loop
*/
} else {
parent.removeChild(brs[j]);
break;
}
}
}
}
function wsCheck(node) {
return !(/[^\t\n\r ]/.test(node.textContent));
}<div class="element">
<br>
<span>
<br>
<span>
<br>
text node one
<br>
</span>
<br>
</span>
</div>
<div class="element">
<br>
<span>
<br>
<br>
text node two
</span>
</div>
Stack Overflow用户
发布于 2018-06-11 05:46:07
像这样写你的代码：
<div class ="element">
<br>
<span>
<br>
<span>
<br>
<span class="anchor">text node</span>
<br>
</span>
<br>
</span>
</div>
<div class ="element">
<br>
<span>
<br>
<br>
<span class="anchor">text node</span>
</span>
</div>现在使用此循环删除所有以前的br
$('.element').each(function () {
var anchor = $(this).find('span:contains(text node)');
anchor.prev("br").remove();
});你可以使用锚定类来代替它的文本，但使用锚定跨度只用于文本是必要的，这意味着如果你在锚定<span>中编写<br>，它将不会在这段代码中remove.you可以删除锚定类，我不使用它。
Stack Overflow用户
发布于 2018-06-11 06:08:29
Ok.you还有另一个选择: in loop获取.element的html()。将其转换为字符串，然后查找text node的索引。现在使用''的replaceAll <br>。在结尾处，将.element.html()替换为您创建的新字符串。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50788024
复制相关文章
相似问题
腾讯云开发者
