Text replace javascript jquery

2019-05-31 16:59发布

问题:

First of all Hello to everyone, and sorry for my English.
I would still take advantage of the expertise and availability of this community.
Yesterday i see a post(this) about string sostitution.
For simplicity, we remove the tables and try to look at the following code

<div id="find">
    <div>(this match)</div>
    <div>(this match)</div>
    <div>some text1
        <div></div>
        <div>(this match)</div>
        <div>some text2</div>
        <div>some text3</div>
    </div>
</div>

in this case if we want to find items that contain the word "match" and replace this word with "some other text" string, we can use one of these code snippet i found by reading other posts on this topic

$(document).ready(function(){
        var elements = $('div');
        for(var i = 0; i < elements.length; i++) {
            var current = elements[i];
            if(current.children.length === 0) {
               var x=current.textContent
               if (x.indexOf('match') > 0) {current.textContent='some other text'}
            }
        } 
})

$(document).ready(function(){
    $("#find div:contains('match'):not(:has(*))").each(function () {    
         var str=$(this).text('some other text')
    })
})

$(document).ready(function(){
    $("div").each(function(){
        var str=''
        var div = $(this).clone();
        div.find("*").remove();
        str=div.text(); 
        if (str.indexOf('match') > 0) {
            $(this).text('some other text')
        }
    })
})


However, if you edit the html in this way all snippets are wrong

<div id="find">(this match)
    <div>(this match)
       <div>(this match)</div>
    </div>
    <div>(this match)<div>aaaa</div></div>
    <div>some text1
        <div></div>
        <div>(this match)</div>
        <div>some text2</div>
        <div>some text3</div>
    </div>
</div>

I have found a solution to this problem but I think it's inelegant and overly verbose

$(document).ready(function(){
    var len =$('#find div').length
    for(i=1;i<len;i++){
        $('div:eq('+i+')').contents().addClass('passed').filter(function () {
         return $(this).text()==='(this match)' && $.trim(this.nodeValue).length
       }).replaceWith('some other text');
    }
    for(i=0;i<len;i++){
        var classx=$('div:eq('+i+')').attr('class')
        if(classx===undefined){
            var xx=$('div:eq('+i+')').contents()[0].nodeValue
            if (xx.indexOf('match') > 0) {
               $('div:eq('+i+')').contents()[0].nodeValue='some other text'
           }
        }
    }
})

Please could someone direct me to a more efficient and elegant way to achieve the same result?
As always, thank you all in advance, any advice will be welcomed with pleasure.

回答1:

I think what you want is here. If I understand what you want to do, a more "elegant" way of doing for the first snippet it could be:

$(document).ready(function(){
    $('#find div').each(function () {
        $(this).html($(this).html().replace('match', 'some other text'));
    });
});

As for the second, this seems to work (as a caveat, it also works on the first snippet):

function findAllText (idToStartWith) {
    $('#' + idToStartWith).html($('#' + idToStartWith).html().replace('match', 'some other text'));
    while ($('#' + idToStartWith).text().indexOf('match') > 0) {
        $('#' + idToStartWith).find('*').each(function () {
            $(this).html($(this).html().replace('match', 'some other text'));
        });
    }
}