Come sostituire lo stesso carattere più volte?

Question

Ho bisogno di sostituire un carattere specifico per tutti gli elementi la cui classe è la stessa con jQuery. Considerate questo codice html:

<div class="product-name"> 
    <h1>Apple®</h1> 
</div> 

<div class="product-name"> 
    <h2>iPhone®</h2> 
</div> 

<div class="product-name"> 
    <h3>iPhone 5S®</h3> 
</div> 

ho bisogno di sostituire tutto il ® charactesr con tag apice con questo codice:

$('.product-name').html(
    $('.product-name').html().replace(/®/gi, '<sup>&reg;</sup>') 
); 

Tuttavia, questo codice sostituirà solo la prima occorrenza. Per la seconda e oltre occorrenze, sostituirà l'intero nome del prodotto con il nome del primo prodotto, compresi i tag h1.

Come posso sostituire solo i caratteri ® senza modificare gli altri caratteri e le etichette?

Answer 1

È possibile utilizzare il callback in html() per restituire il valore di ogni elemento della collezione

$('.product-name').html(function(_, html) { 
    return html.replace(/®/gi, '<sup>&reg;</sup>') 
}); 

FIDDLE

Answer 2

Prova $('.product-name').html().split("®").join('<sup>&reg;</sup>');

Per una risposta più completa,

var body = $("body").html().split('®').join('<sup>&reg;</sup>'); 
$("body").html(body); 

JS Fiddle