search for multiple text strings in a div and remove html characters

Question

So I have a badly formatted div with a bunch of inline CSS with <p>, <font>, and other old school tags. There are 2 text strings I need to grab and place those into a separate div higher up on the page.

Specifically, In the HTML below I need to grab the text after the word "CONDITION:" But I don't want the HTML. The actual text is different on all pages but the HTML is the same.

<div class="content" id="content" style="display: block;">
    <p></p>
    <p align="center">
        <strong>
            <u>
                <font size="5" face="Arial Black" color="#990000">ONE NICE</font>
            </u>
        </strong>
    </p>
    <p align="center">
        <strong>
            <font size="5" face="Windings" color="#000040">MICHELIN</font>
        </strong>
    </p>
    <p align="center">
        <strong>
            <font size="5" color="#000040">ENERGY MXV4 S8</font>
        </strong>
    </p>
    <p align="center">
        <strong>
            <font size="5" face="Arial Black">215/55/17</font>
            <font size="5" face="Arial, Helvetica, sans-serif"><br/>93V</font>
        </strong>
    </p>
    <p align="center">
        <font face="Arial Black">
            <strong>
                <font color="#990000"><u>CONDITION</u> :</font>
            </strong>
            <br/>
        </font>
        <font size="2" face="Arial, Helvetica, sans-serif">
            <strong>Approximate tread: 8-9/32<br>About 80-90% of tread life left</strong>
        </font>
    </p>
    <p></p>
</div>

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

Say "No" to parsing HTML with regex! Here is another approach, simple and elegant:

var text = $('p[align]:last').text();
console.log(text.replace('CONDITION :', ''));

Shows: Approximate tread: 8-9/32About 80-90% of tread life left. See fiddle.

UPDATE:

Since there are multiple content divs on the page, I've amended my code as follows:

var texts = [];
$('div.content').each(function() {
    texts.push($('p[align]:last font:last', this).text());
});

See updated fiddle.

edited May 23 '17 at 11:50

Community

1
1

answered Jul 25 '14 at 17:23

Ilya Luzyanin

7,910
4
29
49

I think this won't work since there is other HTML on the page. The div I posted is one of many content sections on the page. So locating the proper p[align]:last won't work. Any alternative suggestions? We do know this content always lives in the Content div. – Mattman Jul 25 '14 at 21:47
@Mattman, have you checked the code? Is any of answers was useful? If yes, could you mark it as accepted? – Ilya Luzyanin Aug 19 '14 at 11:16

AaronLight · Answer 2 · 2014-07-25T22:11:15.530

0

This code should do the trick.

var found = $('.content').find('p').each(function(index, p){
    if($(this).text().indexOf('CONDITION') != -1){
        console.log($(this).find('font').last().text());
    }
});

edited Jul 25 '14 at 22:11

answered Jul 25 '14 at 17:36

AaronLight

423
3
10

If there are many p tags on this page is your method for locating this particular one the most efficient? If we know this p tag always lives in the Content div, perhaps you can locate it more efficiently with that container? – Mattman Jul 25 '14 at 21:49
Oh for sure! I was merely showing you how I would find that section of text within this container... editing my answer now. – AaronLight Jul 25 '14 at 22:10

score 0 · Answer 3 · answered Jul 25 '14 at 17:36

Here's my solution http://jsfiddle.net/Yqsr3/

$(function () {
   var conditionElem = $('font');
    conditionElem = $.grep(conditionElem, function (e, i){
       return $(e).find('u').text() === "CONDITION"; 
    });
    var description = $(conditionElem).next().text();
    console.log(description);
});

search for multiple text strings in a div and remove html characters

3 Answers3