itinance itinance - 5 months ago 44
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

document
, 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
<mytag>
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 = regEx.map(function(val){
return val.toUpperCase();
});


But the
map()
function returns only the matched content instead of the whole string variable with the transformed part of
<mytag>
.

Also, the
match()
method will return null, if the tag wasn't found. So a fluent programming style like
storyText.match().doSomething
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
react-native-html-view
Plugin
which doesn't support
text-transform
out of the box.)

Answer

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.