web-dev-qa-db-fra.com

jQuery remplace toutes les occurrences d'une chaîne dans une page html

Je travaille sur un projet où je dois remplacer toutes les occurrences d'une chaîne par une autre chaîne. Cependant, je ne veux remplacer la chaîne que s'il s'agit de texte. Par exemple, je veux transformer ceci ...

<div id="container">
  <h1>Hi</h1>
  <h2 class="Hi">Test</h2>
  Hi
</div>

dans...

<div id="container">
  <h1>Hello</h1>
  <h2 class="Hi">Test</h2>
  Hello
</div>

Dans cet exemple, tous les "Salut" ont été transformés en "Salut" sauf le "Salut" comme classe h2. J'ai essayé...

$("#container").html( $("#container").html().replace( /Hi/g, "Hello" ) )

... mais qui remplace également toutes les occurrences de "Salut" dans le html

javascriptjqueryhtmlreplace
21
Calebmer

Cette:

$("#container").contents().each(function () {
    if (this.nodeType === 3) this.nodeValue = $.trim($(this).text()).replace(/Hi/g, "Hello")
    if (this.nodeType === 1) $(this).html( $(this).html().replace(/Hi/g, "Hello") )
})

Produit ceci:

<div id="container">
    <h1>Hello</h1>
    <h2 class="Hi">Test</h2>
    Hello
</div>

exemple jsFiddle

17
j08691

De bons résultats avec:

function str_replace_all(string, str_find, str_replace){
try{
    return string.replace( new RegExp(str_find, "gi"), str_replace ) ;      
} catch(ex){return string;}}

et plus facile à retenir ...

9
Cyril Jacquart
 replacedstr = str.replace(/needtoreplace/gi, 'replacewith');

needtoreplace ne doit pas être arrondi par '

7
Saurabh Chandra Patel
//Get all text nodes in a given container
//Source: http://stackoverflow.com/a/4399718/560114
function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.Push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

var textNodes = getTextNodesIn( $("#container")[0], false );
var i = textNodes.length;
var node;
while (i--) {
    node = textNodes[i];
    node.textContent = node.textContent.replace(/Hi/g, "Hello");
}

Notez que cela correspondra également aux mots où "Salut" n'est qu'une partie du mot, par ex. "Colline". Pour faire correspondre le mot entier uniquement, utilisez /\bHi\b/g

1
Matt Browne

c'est parti => http://jsfiddle.net/c3w6X/1/

var children='';

$('#container').children().each(function(){
    $(this).html($(this).html().replace(/Hi/g,"Hello")); //change the text of the children

    children=children+$(this)[0].outerHTML; //copy the changed child
});
var theText=$('#container').clone().children().remove().end().text(); //get the text outside of the child in the root of the element

$('#container').html(''); //empty the container

$('#container').append(children+theText.replace(/Hi/g,"Hello")); //add the changed text of the root and the changed children to the already emptied element
0
Amin Jafari