将文本节点合并到一个文本节点并包裹在 p-tag 中。 Javascript/JQuery答案

【问题标题】：Merge text nodes to one text node and wrap inside a p-tag. Javascript/ JQuery将文本节点合并到一个文本节点并包裹在 p-tag 中。 Javascript/JQuery
【发布时间】：2021-01-20 02:55:40
【问题描述】：

我有一个包含多个文本节点的 html 文档，通常包含在 p-tags 中，但有些不是。像这样：

<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-tags 中的方法，但这不是我想要实现的。

 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-tags 之间没有包裹 p-tag 的所有文本节点合并到一个文本节点，然后围绕该文本节点包裹 p-tag。像这样：

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

这可能吗？对不起我的英语。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这将 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]);
  }
}

得到它的工作here。

【讨论】：

【解决方案2】：

您可以做的是清空容器并添加用<p> 包裹的所有子项。
因此，您不在乎原始文本是否有“p”，您可以将文本用“p”换行。
代码更简单易读。

$(document).ready(function(){
  var original = $("#container").text().split("\n");
  $("#container").empty();
  $(original).each(function(a,b){
    $("#container").append("<p>" + b + "</p>");
  });
});

Here 你有一个工作示例。

【讨论】：