在 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 敦促我提醒你）}} 尝试avoid using regular expressions to manipulate the DOM。

Answer 2

编辑、更新

标签的内容要转成大写：

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

Answer 3

一般来说，您不应该使用 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 或a 或strong 或em 在p 内。对于这些情况，这是行不通的。

Answer 4

为什么不这样呢？

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

https://jsfiddle.net/gub61haL/