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

Question

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

注意：这是一个 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()函数return只是匹配的内容而不是整个字符串变量与<mytag>的转换部分。

此外，如果未找到标签，match() 方法将 return 为空。所以像 storyText.match().doSomething 这样流畅的编程风格是不可能的。

由于要转换的标签更多，我将不胜感激我可以将变量传递给正则表达式模式的方法。

有解决这个问题的提示吗？

_{（此代码用于带有 react-native-html-view Plugin 的 React-Native-App，它不支持开箱即用的 text-transform。）}

Answer 1

为什么不这样？

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

https://jsfiddle.net/gub61haL/

Answer 2

由于 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 3

编辑、更新

The content of the Tag < mytag > shall be transformed to uppercase:

<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 4

一般来说，你不应该用 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。对于这些情况，这不起作用。

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

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

html

javascript

ecmascript-5

ecmascript-6

react-native