在React-Native中将指定的HTML标记之间的文本内容添加到UpCase

Question

我想在React-Native应用程序中使用纯JavaScript将特定HTML标记的内容大写.

注意:这是一个React-Native应用程序.没有JS document,可用,也没有jQuery.同样,CSS text-transform: uppercase无法使用,因为它不会在Web浏览器中显示.

比方说,有以下HTML文本:

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

标签的内容<mytag>应转换为大写:

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

我试过这段代码:

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

但该map()函数仅返回匹配的内容,而不是整个字符串变量与转换后的部分<mytag>.

此外,match()如果未找到标记,则该方法将返回null.所以流畅的编程风格storyText.match().doSomething是不可能的.

由于有更多标记要转换,我可以理解一种可以将变量传递给正则表达式模式的方法.

任何提示要解决这个问题？

_{(此代码在React-Native-App中使用,react-native-html-view插件不支持text-transform开箱即用.)}

Answer 1

因为看起来document和DOM操作(例如,通过jQuery和本机JS document函数)是不受限制的,我猜你必须使用正则表达式.

那么为什么不创建一个像上面这样的工作的函数:循环遍历每个标签并通过正则表达式替换它？

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"]);

看到它在JSFiddle上工作.

此外,虽然它可能不适用于这种情况,^{_{(@ Bergi敦促我提醒你)}}尽量避免使用正则表达式来操纵DOM.