itinance itinance - 1 year ago 212
Javascript Question

Make text content between specified HTML tags toUpperCase in React-Native

I want to make to uppercase the contents of specific HTML tags with plain JavaScript in a React-Native application.

Note: This is a React-Native application. There is no JS

, available, nor jQuery. Likewise, CSS
text-transform: uppercase
cannot be used because it will not be displayed in a web browser.

Let's say, there is the following HTML text:

<p>This is an <mytag>simple Example</mytag></p>

The content of the Tag
shall be transformed to uppercase:

<p>This is an <mytag>SIMPLE EXAMPLE</mytag></p>

I tried this code:

let regEx = storyText.match(/<mytag>(.*?)<\/mytag>/g)
if(regEx) storyText ={
return val.toUpperCase();

But the
function returns only the matched content instead of the whole string variable with the transformed part of

Also, the
method will return null, if the tag wasn't found. So a fluent programming style like
isn't possible.

Since there are more tags to transform, an approach where I can pass variables to the regex-pattern would be appreciated.

Any hints to solve this?

(This code is used in a React-Native-App with the
which doesn't support
out of the box.)

Answer Source

Since it seems that document and DOM manipulation (e.g., i.e., through jQuery and native JS document functions) are off limits, I guess you do have to use regex.

Then why not just create a function that does a job like the above: looping through each tag and replacing it via regex?

var storyText = "your HTML in a string";
function tagsToUppercase(tags) {
  for(tag in tags) {
    let regex = new RegExp("(<" + tags[tag] + ">)([^<]+)(<\/" + tags[tag] + ">)", "g");
    storyText = storyText.replace(regex, function(match, g1, g2, g3) {
      return g1 + g2.toUpperCase() + g3;

// uppercase all <div>, <p>, <span> for example
tagsToUppercase(["div", "p", "span"]);

See it working on JSFiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download