Replace to sup text

by Mohammed Fellak

HTML

<img src="https://ashleyfurniture.scene7.com/is/image/AshleyFurniture/46005-16-56-10X8-CROP?$AFHS-Grid-1X$" width="200px" alt="title" />
<h3 id="title" style="text-decoration:underline;">
	Ashlor Nuvella® 2-Piece Sectional with Chaise
</h3>
<p>⭐⭐⭐⭐⭐</p>
<h3>
	$1,017.99
</h3>

<button onclick="supCharacter()">
    Apply Change on ®
</button>

<button class="reload" onclick="document.location.reload()">
    Reload Page
</button>

CSS

* {
    font-family: arial;
}

button {
    background: #f30;
    color: white;
    padding: 0.5rem 1rem;
    border: 1px solid #f50;
    border-radius: 5px;
    margin-top: 1rem;
}

.reload {
    background: none;
    color: #f30;
}

JavaScript

var currentTitle = document.querySelector('#title').innerHTML
   
function supCharacter() {
   var subscriptedTitle = currentTitle.replace(/\®/gi, '<sup>&reg;</sup>')
   document.querySelector('#title').innerHTML = subscriptedTitle
}