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

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

本文关键字：文本 设置 之间 React-Native HTML      更新时间：2023-09-26

我想在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-html-view插件的 React-Native-App，该插件不支持开箱即用text-transform。

由于似乎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。

编辑，更新

标签的内容应转换为大写：

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

可以将String.prototype.replace()与RegExp /(<mytag>)(.*?)(<'/mytag>)/g一起使用来创建三个捕获组，在第二个捕获组上调用.toUpperCase()

let storyText = "<p>This is an <mytag>simple Example</mytag></p>";
let regEx = storyText.replace(/(<mytag>)(.*?)(<'/mytag>)/g
, function(val, p1, p2, p3) {
  return p1 + p2.toUpperCase() + p3
});
console.log(regEx);

一般来说，

你不应该用javascript解析html。考虑到这一点，如果这是您真正需要做的，请尝试以下操作：

let story = '<p>smallcaps</p><h1>heading</h1><div>div</div><p>stuff</p>';
console.log( story.replace(/<(p|span|div)>([^<]*)<'/(p|span|div)>/ig,
    (fullmatch, startag,content,endtag) =>  `<${startag}>${content.toUpperCase()}</${endtag}>` )
)

考虑以下情况：您可能在div内嵌套了p值，或者在p中嵌套了a或strong或em。对于这些情况，这是行不通的。

为什么不这样呢？

$("mytag").text($("mytag").text().toUpperCase())

https://jsfiddle.net/gub61haL/

相关文章：