How can I find text that is not inside a div element?

Question

I try to find text that is not inside a div element and wrap it into a div:

$( ".details" ).text().wrap( "<div></div>" );

.details div {
    font-size: 11px;
    color: #777;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 0;
    margin: 0;
    border-top: 1px solid rgba(0,0,0, .05);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="details">
    <div>monkey</div>   
    elephant
    <div>rabbit</div>   
    <div>sun</div>  
    <div>moon</div> 
    <div>bird</div>                                                          
 </div>

I cannot find the right way to to this.

The result I try to achieve is:

<div class="details">
    <div>monkey</div>   
    <div>elephant</div>
    <div>rabbit</div>   
    <div>sun</div>  
    <div>moon</div> 
    <div>bird</div>                                                          
 </div>

Does this answer your question? [Wrap text within element](https://stackoverflow.com/questions/13652140/wrap-text-within-element) — Jimenemex, Apr 09 '21 at 13:30

Rory McCrossan · Accepted Answer · 2021-04-09T13:31:33.127

4

To achieve this you can retrieve the child text nodes using a combination of contents() and filter(). Then you can surround them in a div using wrap():

$('.details')
  .contents()
  .filter((i, node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '')
  .wrap('<div />');

.details div {
  font-size: 11px;
  color: #777;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 0;
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, .05);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="details">
  <div>monkey</div>
  elephant
  <div>rabbit</div>
  <div>sun</div>
  <div>moon</div>
  <div>bird</div>
</div>

edited Apr 09 '21 at 13:31

answered Apr 09 '21 at 13:28

Rory McCrossan

331,213
40
305
339

what does `nodeType === 3` mean. Why 3? – peace_love Apr 09 '21 at 13:29
`nodeType` is an enum. `3` is a text node. You could use `== Node.TEXT_NODE` instead if you'd prefer to avoid magic numbers in the code, which is the better approach. More info: https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType – Rory McCrossan Apr 09 '21 at 13:30

Dan Mullin · Answer 2 · 2021-04-09T14:05:02.587

1

Just turn your text into an array and wrap each element individually.


    var text = $( ".details" ).text().split(" ");
    for (var i = 0; i < text.length; i++) {
        text[i] = "<div>" + text[i] + "</div>";
    }

edited Apr 09 '21 at 14:05

answered Apr 09 '21 at 13:31

Dan Mullin

4,285
2
18
34

1

Interesting idea, did you try this with OPs sample HTML? `text[i].wrap(` doesn't look like it would do anything as it's just a string, not related to a DOM node at that point. Can you add a snippet? – freedomn-m Apr 09 '21 at 13:35
I modified my example to handle a vanilla string. – Dan Mullin Apr 09 '21 at 14:05
1

My point being `text[i] =` does nothing. You need to add it back to the DOM. But if you do, you'll lose any events/data etc. – freedomn-m Apr 09 '21 at 14:18
True that you'll lose events and data. Here's a working fiddle of my example. https://jsfiddle.net/5L40yohp/ – Dan Mullin Apr 09 '21 at 14:21

How can I find text that is not inside a div element?

2 Answers2