CODEWITHSUNDEEP
javascriptjquery
Tom
Tom

Reputation: 12998

jQuery - wrap all unwrapped text in p tags

I have a situation where the following code is getting written to my page. 

<div>
    Some text here which is not wrapped in tags
    <p>Some more text which is fine</p>
    <p>Blah blah another good line</p>
</div>

In this case it always seems to be the first line which is not being wrapped in p tags which might make the solution to this easier, although it's not every time. Some times it is fine.

What I need to do is identify whether the first line is wrapped or not and if not then wrap it.

Unfortunately I'm not sure where to start with this problem so any help would be appreciated.

Upvotes: 6

Views: 5467

Answers (5)

ymdahi
ymdahi

Reputation: 175

Ran into a similar need and attempted to employ the solution @Arash_Milani. Solution worked, however I ran into conflicts when the page also required to make ajax calls.

After a bit of digging, I found a fairly straight-forward solution on api.jquery.com using the .contents() method:

$('.wrapper').contents().filter(function() {
  return this.nodeType === 3;
}).wrap('<p class="fixed"></p>').end();
p.good {
  color: #09f;
}
p.fixed {
  color: #ff0000;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  Some plain text not wrapped in any html element.
  <p class="good">This text is properly wrapped in a paragraph element.</p>
</div>

Upvotes: 1

Arash Milani
Arash Milani

Reputation: 6308

Try using this code to wrap any TextNodes that are not wrapped with <p> tag.

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($("#demo")[0])​​​​;
    for(var i=0; i < textnodes.length; i++){
        if($(textnodes[i]).parent().is("#demo")){
            $(textnodes[i]).wrap("<p>");
        }
    }​

here is a jsfiddle that shows this in action.

PS: TextNode detection part has been borrowed from this answer

Upvotes: 4

Sanjeev
Sanjeev

Reputation: 173

Try this :-

<div class="container">
Some text here which is not wrapped in tags
<p>Some more text which is fine</p>
<p>Blah blah another good line</p>
</div>​

JS

    $(function(){
    var $temp = $('<div>');
    $('div.container p').each(function(){
            $(this).appendTo($temp);            
    });     

    if($.trim( $('div.container').html() ).length){
       var $pTag = $('<p>').html($('.container').html()); 
        $('div.container').html($pTag);
    }

    $('div.container').append($temp.html());
});
​

​Here is the working example :-

http://jsfiddle.net/dhMSN/12

Upvotes: 2

user1896534
user1896534

Reputation: 101

here you go: http://jsfiddle.net/RNt6A/

$('div').wrapInner('<p></p>');​​​​
$('div p > p').detach().insertAfter('div p');

Upvotes: 4

just.another.programmer
just.another.programmer

Reputation: 8785

jQuery is bad at handling text nodes, so you'll need to do some direct DOM manipulation on this. This also uses the "trim" function.. Its on jsfiddle.

var d = $("div")[0];

for(var i=0; i<d.childNodes.length; i++) {
    if(d.childNodes[i].nodeType === 3 &&
       d.childNodes[i].textContent.replace(/^\s+|\s+$/g, "")) {
        wrapNode(d.childNodes[i]);
    }
}

function wrapNode(node) {
    $(node).replaceWith("<h1>" + node.textContent + "</h1>");
}

Upvotes: 0

Related Questions