CODEWITHSUNDEEP
javascripthtmljquerywordpress
Misa
Misa

Reputation: 13

Find specific string and capitalize it

Inside my entry header I have entry title (h1 tag) and inside of it I have <sup> tag. This title is coming from WordPress and superscript tag is working but I want to find every "tm" inside every title and capitalize it using js/jquery. This is my html:

<div class="entry-header">
 <h1 class="entry-title">Just Testing Something<sup>TM</sup></h1>                        
</div>

and my js:

$(document).ready(function(){

    $('sup:contains("tm")')
        $(this).css({
        'cssText': 'text-transform: uppercase !important'
        });
});

But this doesn't work. Does anybody know why?

Upvotes: 1

Views: 68

Answers (2)

Ramon Chiara
Ramon Chiara

Reputation: 656

I was working on a "pure JS" solution when @gabriel-lupu answered! :-D

Well, I'm posting here just in case:

<!DOCTYPE html>
<html>
    <head>
        <title>My Title</title>
        <style type="text/css">
            .myStyle {
                text-transform: uppercase;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="entry-header">
            <h1 class="entry-title">Just Testing Something<sup>TM1</sup></h1>                        
        </div>
        <div class="entry-header">
            <h1 class="entry-title">Just Testing Something<sup>Middle</sup></h1>                        
        </div>
        <div class="entry-header">
            <h1 class="entry-title">Just Testing Something<sup>TM2</sup></h1>                        
        </div>
        <script type="text/javascript">
            function setClassOfElemWithText(elem, text, myClass) {
                var nodes = document.querySelectorAll(elem);
                for (var i = 0; i < nodes.length; i++) {
                    var node = nodes[i];
                    if (node.textContent.indexOf(text) !== -1) {
                        node.setAttribute('class', myClass);
                    }
                }
            }

            setClassOfElemWithText('sup', 'TM', 'myStyle');
        </script>
    </body>
</html>

Upvotes: 1

Gabriel Lupu
Gabriel Lupu

Reputation: 1447

Just looked at your question and this works for me:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Change tm</title>
  </head>
  <body>
    <div class="entry-header">
      <h1 class="entry-title">
        <sup>copy</sup>Just Testing Something<sup>tm</sup>
      </h1>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $("sup:contains('tm')").css("text-transform", "uppercase");
      });
    </script>
  </body>
</html>

Upvotes: 1

Related Questions