some text
All geek questions in one place

Get the text value inside each div-dependent text

I have this structure:

<table id="thetable">
    <tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    <tr>
    </tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    </tr>
</table>

I want to take the text inside the div, but only the text with this word: good. and replace. So I do this:

$("#thetable div:contains('good')").each(function () {
        try {
            console.log($(this).text());
            console.log("------------------------------");
        } catch (ex) {

        }
    })

But console.log tells me that every log accepts not only div text with good text, but also two others. This is the seal:

(This text is good)some text2some text3

So, I want to use only div with text and replace this text with another text.

Thank!

Basically: I want to get a div where I have the word "good" (or any word I want), and insert / replace text in this div. Find in the entire document or, in particular, in part of the document, for example, in this example: in the table.

+4
source share
7 answers

div, 3 divs

,

$("#thetable div:contains('good'):not(:has(*))").each(function () {
})

: Fiddle

+7

"div", . .

$("#thetable div:contains('good')").each(function () {
        try {
            if ($('div', this).length < 1) { // test child presence
                console.log($(this).text());
                console.log("------------------------------");
            }
        } catch (ex) {

        }
    })

http://jsfiddle.net/jF6KU/

+2

Arun P Johny

Arun P Johny , , .
, , , html ,

<div>(This text is good)<div>(This text is good)</div></div>

+1

- .

$("#thetable div").each(function () {
    try {
        var val = $(this).text();

       if ( val.indexOf('good') !== -1 )
       {            
          console.log($(this).text());
          console.log("------------------------------");
       }
    } catch (ex) {

    }
})
0

, (, , ) vanilla JS. , JsPerf

3 html, :

    var containers = document.querySelectorAll('#thetable div div div');
    var i, n = containers.length;

    for (i=0; i<n; i++)
    {
        if (containers[i].innerText.indexOf('good') !== -1)
        {
            console.log("found instance of 'good'");
            containers[i].title = "Gotcha!";
        }
    }
0

jquery div.

$("#thetable tr div div ").find("div:contains('good')").closest('div')

jsfiddle

0

I found a solution, but it seems overly detailed.
I posted the question in the community ( here ), but so far no one has answered correctly.
However, I leave you my code, which allows you to get an element containing both a string and another div containing a string (look at the comment)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table id="thetable">
<tr>
<td>
<div>
    <!--div that contains the string and a div with the string-->
    <div>(This text is good)<div>(This text is good)</div></div>
    <div>
        <div></div>
        <div>(This text is good)</div>
        <div>some text1</div>
        <div>some text2</div>
    </div>
</div>
</td>
<tr>
</tr>
<td>
<div>
    <div>some text</div>
    <div>
        <div></div>
        <div>(This text is good)</div>
        <div>some text1</div>
        <div>some text2</div>
    </div>
</div>
</td>
</tr>
<tr>
<td>
<div>
    <div>some text</div>
    <div>
        <div></div>
        <div>(This text is good)</div>
        <div>some text1</div>
        <div>some text2</div>
    </div>
</div>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var len =$('#thetable div').length
    for(i=1;i<len;i++){
        $('div:eq('+i+')').contents().addClass('passed').filter(function () {
         return $(this).text()==='(This text is good)' && $.trim(this.nodeValue).length
       }).replaceWith('FIND');
    }

    for(i=0;i<len;i++){
        var classx=$('div:eq('+i+')').attr('class')
        if(classx===undefined){
            var ca=$('div:eq('+i+')').contents()[0].nodeValue
            if (ca.indexOf('good') > 0) {
               $('div:eq('+i+')').contents()[0].nodeValue='FIND'
           }
        }
    }
})
</script>
</body>
</html>

I hope this solution can help you.

0
source

Source: https://habr.com/ru/post/1535719/

More articles:


All Articles