javascript - 在 React-Native 中将指定 HTML 标签之间的文本内容设为大写

Question

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

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

比方说，有以下 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-html-view Plugin 的 React-Native-App，它不支持开箱即用的 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 敦促我提醒您)/sub>}} 尝试 avoid using regular expressions to manipulate the DOM .