Question

我有一个包含多个文本和子元素的元素。我想将它们包装在

段落中

我知道如何将单个文本元素包装在自己的p元素内，但是如果它们将文本分开，我想在该p元素内包含任何子元素。

元素内容：

  // Array of WP_User objects.
  $results = array();
  foreach ( $user_query as $user ) {
    $result = array();
    $result['whotyping'] = $user_info->whotyping;
    $result['typingto'] = $user_info->typingto;
    $result['typing'] = $user_info->typing;
    $results[] = $result;
  }

  echo json_encode($results);

通知模式文本->子->文本->子...我想将所有这些元素都包装在一个p元素内（子“分隔”文本，因此可以考虑部分）

我当前拥有的代码：

[text, h4, text, sub, text, sub, text, sub, text, br, br, br, center, br, br, br, text]

初始html：

$(".back .main-text")
  .contents()
  .filter(function() {
    return this.nodeType === 3;
  })
  .wrap("<p></p>")
  .end();

预期输出：

<div class="text-center main-text">                      
<h4>Header</h4> Text with no p<sub>a</sub>, p<sub>b</sub>, and p<sub>c</sub> some other text here 
<br><br>
</div>

实际输出：

<div class="text-center main-text">
<h4>Header</h4> <p>Text with no p<sub>a</sub>, p<sub>b</sub>, and p<sub>c</sub> some other text here</p> 
<br><br></div>

Answer 1

我想出了有效的代码，尽管它不是很漂亮：）

contents = $('#main-card .back .main-text').contents();

main_parent = $('<div>');
save = $('<p>');

$.each(contents, function(i, content) {
  content = $(content).clone();
  if (content.prop("tagName") == "BR" || content.prop("tagName") == "CENTER" || $.trim(content.text()) != "") {
    tag = content.prop("tagName");
    if (typeof tag != "undefined" && tag != "SUB") {
      if ($.trim(save.html()) != "") {
        main_parent.append(save);
        save = $('<p>');
      }
      main_parent.append(content);
    } else {
      save.append(content);
    }
  }
})

if ($.trim(save.html()) != "") {
  main_parent.append(save);
}

$('#main-card .back .main-text').html(main_parent.html());

感谢您的反馈

Answer 2

不是通用解决方案。但是，如果您所有的源代码都像带有不同级别标题的初始文本，则应该可以正常工作。

let d = document.querySelector('.main-text')
let c = d.innerHTML.split(/(?<=<\/h\d>)[''|\s+]/)

let r = `${c[0]}<p>${c[1]}</p>`
d.innerHTML = r
document.querySelector('output').value = r

<div class="text-center main-text">                      
<h4>Header</h4> Text with no p<sub>a</sub>, p<sub>b</sub>, and p<sub>c</sub> some other text here 
<br><br>
</div>

<code>
<output></output>
</code>

在段落中包装多个元素内容

2 个答案: