如何使用jquery将元素转换为2个元素

Question

I have this element:

<h4>username (role) on 26 Nov 2018 20:39:42 +00:00:</h4>

and I need it to be like this:

<h4>username (role)</h4>
<p>on 26 Nov 2018 20:39:42 +00:00:</p>

There will always be 2 words in the <h4> element, but those words will vary. The <p> element will be dynamically updated to the current date and time, but will always start with "on" and end with "00:".

How can I achieve this outcome? I'm using jQuery but am fairly new to it, so I can't seem to find the right approach.

Answer 1

You can split on on and then use after() to create a new p :

 $('h4').each(function() { // use an each so it will work if there are multiple on a page var $h4 = $(this), text = $h4.text(), textParts = text.split(' on'); // split on ` on` if (textParts.length == 2) { // only update if there is a paragraph $h4.text(textParts[0]).after('<p>on ' + textParts[1] + '</p>'); // update the h4 text and put the new paragraph after it } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h4>username (role) on 26 Nov 2018 20:39:42 +00:00:</h4> 

Answer 2

It will be better to fix this kind of cases without the use of the JS code, but if you don't have access to the source and you really need a JS soltion, check this one:

 var h4_p = $('h4').text().split(' on'); $('h4').text(h4_p[0]); $('<p>on ' + h4_p[1] + '</p>').insertAfter($('h4')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h4>username (role) on 26 Nov 2018 20:39:42 +00:00:</h4> 

Answer 3

Code

 // gets the header element and caches it since we use it twice let header = $('h4'); // get header text let headerText = header.text(); // run regex to get the items we need let result = /(.*?) (on .*)/i.exec(headerText); // create a new header for the first group found let newHeader = '<h4>' + result[1] + '</h4>'; // create the paragraph with the second group found let newParagraph = '<p>' + result[2] + '</p>'; // replace the current header with the new one header.replaceWith(newHeader + newParagraph); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h4>username (role) on 26 Nov 2018 20:39:42 +00:00:</h4> 

Description

This answer utilizes regex and jquery to get the current header and then create the new elements.

Answer 4

Quick and dirty solution:

var split = $("h4").text().split(" ");
var newhtml = "<h4>"+split[0]+" "+split[1]+"</h4>";
newhtml += "<p>";
for(i = 2; i < split.length;i++){
  newhtml += split[i]+" ";
}

newhtml += "</p>";

alert(newhtml)