Corbin Corbin - 3 years ago 148
HTML Question

Scanning text in between two HTML elements and wrapping them with .wrapAll() function

I am working on a forum webpage but am not allowed to edit the HTML within the web page. I want to hide text until hovered over. This is a rough example of the HTML code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nextUntil demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<dl>
<dd class="postprofile-info">
<span>
<span>
<img src="image here">
</span>
</span>
"This is the text I want to surround in a div"
<br>
<span class="label"></span>
"Text from here on out can be ignored"
<br>
</dd>
<dl>
</body>
</html>


I know that there is .nextUntil() and .wrapAll() functions, but I just cannot get it to work properly. The other issue that I have encountered is comparing the information between the tag and the
tag to ensure that I only wrap the text I want to in a div. My goal is to wrap that text in a div so that I may give it a class and manipulate it using css.

Edit 1:
The reason why I did not provide any JS is because I have only been testing fragments that utilize .nextUntil() and .wrapAll(). This is all that I have, and it is in bits and pieces:

(just testing to see if this would work:)

$( ".postprofile-info" ).nextUntil( "dt" ).css( "background-color", "red" );


(another test)

$('form > span').each(function(){
$(this).next('p').andSelf().wrapAll('<div class="test"/>');
});


(another test)

var nodelist = document.getElementsByTagName("dd").length;
for (i = 0; i < nodelist-1; i++) {
var TextDd = document.getElementsByTagName("dd")[i].innerHTML;
if (TextDd === "For helping in the construction of the CGDT Forum"){
$('form > span').each(function(){
$(this).next('p').andSelf().wrapAll('<div class="test"/>');
});
}
}

Answer Source

The thing which makes it not so easy is you are trying to wrap a text node. Which is not so simple to be found. But something like this does the trick:

$('dl > dd').each(function(index){
    var textNode = $(this).contents().get(2).nodeValue;
    console.log(textNode);
    var newHtml = $(this).html().replace(textNode,'<div class="new">'+textNode+'</div>');
    $(this).html(newHtml);
});
.new {
    border: solid 3px green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
  <dd class="postprofile-info">
    <span>
        <span>
            <img src="image here">
        </span>
    </span>
    "This is the text I want to surround in a div"
    <br>
    <span class="label"></span>
    "Text from here on out can be ignored"
    <br>
  </dd>
</dl>

Note: This will not work if you change the markup, especially cause of .get(2) so the text node has to be exactly at that position.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download