将文本节点合并到一个文本节点,并在 p 标记内换行.Javascript/JQuery
Merge text nodes to one text node and wrap inside a p-tag. Javascript/ JQuery
我有一个由几个文本节点组成的html文档,通常包装在p标签中,但有些不是。喜欢这个:
<div id="container">
<p>"Some text"</p>
<p>"Some text"</p>
"Some text" "Some text" "Some text"
<p>"Some text"</p>
"Some text" "Some text" "Some text"
</div>
我找到了一种使用 Jquery 将所有文本节点包装在 p 标签内的方法,但这不是我想要实现的。
function getTextNodesIn(node, includeWhitespaceNodes) {
var textNodes = [], whitespace = /^'s*$/;
function getTextNodes(node) {
if (node.nodeType == 3) {
if (includeWhitespaceNodes || !whitespace.test(node.nodeValue)) {
textNodes.push(node);
}
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
getTextNodes(node.childNodes[i]);
}
}
}
getTextNodes(node);
return textNodes;
}
var textnodes = getTextNodesIn($("#container")[0]);
for(var i=0; i < textnodes.length; i++) {
if(($(textnodes[i]).parent().is("#container"))) {
$(textnodes[i]).wrap("<p>");
}
}
我希望 p 标签之间的所有文本节点(没有包裹 p 标签)合并到一个文本节点,然后在该文本节点周围包裹一个 p 标签。喜欢这个:
<div>
<p>"Some text"</p>
<p>"Some text"</p>
<p>"Some text Some text Some text"</p>
<p>"Some text"</p>
<p>"Some text Some text Some text"</p>
</div>
这可能吗?对不起我的英语。
这会将 HTML 保留在段落中,并将段落中的段落之间的"间隔"括起来,它将基本节点和间隔保存到列表中,然后按顺序重建它。
var container = document.getElementById("container").childNodes;
var ps = [];
var ps_interval = [];
for(var i=0; i < container.length; i++){
if(container[i].nodeType == 3){ //if its a textnode
var str = container[i].textContent.trim();
if(str !== ""){
ps_interval.push(str);
}
}else{
if(container[i].nodeName != 'P'){ //if it's not a paragraph
ps_interval.push(container[i]);
}else{
if(ps_interval.length !== 0){
ps.push(ps_interval);
ps_interval = [];
}
ps.push(container[i]);
}
}
}
if(ps_interval.length !== 0){
ps.push(ps_interval);
}
function addToP(interval){
var p = document.createElement("p");
for(var j=0; j< interval.length; j++){
if("string" == typeof interval[j]){
p.appendChild(document.createTextNode(interval[j]));
}else{
p.appendChild(interval[j]);
}
}
return p;
}
$('#container').empty();
for(var k=0; k < ps.length; k++){
if( Object.prototype.toString.call( ps[k] ) === '[object Array]' ) {
$('#container').append(addToP(ps[k]));
}else{
$('#container').append(ps[k]);
}
}
让它在这里工作。
您可以做的是清空容器并添加所有用<p>
包裹的子项。
所以你不在乎原始文本是否有"p",你拿走文本并用"p"换行。
代码更简单易读。
$(document).ready(function(){
var original = $("#container").text().split("'n");
$("#container").empty();
$(original).each(function(a,b){
$("#container").append("<p>" + b + "</p>");
});
});
在这里,您有一个工作示例的小提琴。
相关文章:
- Javascript,将文本添加到具有现有文本节点的元素中
- 拆分文本节点
- 使用TreeWalker检索非Javascript文本节点
- jquery在元素中查找文本节点,并使用标记进行连接和包装
- JavaScript 文本节点属性
- 获取文本节点的宽度
- 如何将由
分隔的文本节点与它们自己的标记包装起来
- 如何返回jQuery对象中的文本节点
- 包装和打开jquery后合并文本节点
- 有没有一种方法可以在javascript中为文本节点添加属性
- 使用文本节点打印段落
- 计算文本节点中的字母数
- 正则表达式:仅在标记中匹配文本节点
- "“错误”;导致故障的文本节点
- 正在创建文本节点
- jQuery,如何测试一个变量是一个文本节点,不包含任何标记
- 使用 casperjs 抓取文本节点的最快方法
- 如何在文本节点中保留空格
- 如何获取文档片段中的所有文本节点
- 选择“相邻同级”而不干预文本节点