使用正则表达式 match.map 将 React <img> 插入到现有字符串中

Using regex match.map to insert React <img> into existing string

本文关键字：插入 字符串 img 正则表达式 match map React      更新时间：2023-09-26

基于我之前的一个问题，我知道如何获取字符串并将其完全替换为 React 图像元素。 

if (source.match(/'{([0-z,½,∞]+)'}/g)) {
      tagged = source.match(/'{([0-z,½,∞]+)'}/g)
      .map(function (basename, i) {
          var src = './src/img/' + basename.substring(1, basename.length - 1).toLowerCase() + '.png';
          return <img key={i} src={src} height='15px'/>;
      });
    }

以上效果很好。但是，现在我需要获取一个字符串并仅用图像元素替换其中的一部分(上面的代码不这样做;它不会保存任何周围的文本(。所以我尝试的是：

tagged = source.replace(/'{([0-z,½,∞]+)'}/g, function(basename) {
      var src = './src/img/' + basename.substring(1, basename.length - 1).toLowerCase() + '.png';
      return <img src={src} height='15px'/>});

(如 http://regexr.com/3cq7n 所示，除了我无法向替换部件添加功能(。问题是，tagged是一串对象，而不是像第一个.map代码返回的实际对象。但是，它成功地将对象嵌入到文本中，而不是破坏周围的文本。如何将两者结合起来，以便在文本中嵌入适当的<img>元素？

编辑：尝试了这个双重替换正则表达式，但它也不起作用...

tagged = <div dangerouslySetInnerHTML={{__html: ent.encode(source).replace(/'r?'n/g, '<br/>').replace(/'{([0-z,½,∞]+)'}/g, (fullMatch, firstMatch) =>
        `<img src=./src/img/${firstMatch.toLowerCase()}.png height=12px/>`
      )}}></div>

好吧，React.js不会自动将节点转换为它们的HTML表示形式。不过，您可以将<img>创建为字符串，如下所示：

tagged = source.replace(/'{([0-z,½,∞]+)'}/g, (fullMatch, firstMatch) =>
    `<img src=./src/img/${firstMatch.toLowerCase()}.png height=15px />`
);

如果需要从组件返回它，则需要将其包装在 <div> 或其他元素中，如下所示：

return <div dangerouslySetInnerHTML={{__html: source.replace(/'{([0-z,½,∞]+)'}/g, (fullMatch, firstMatch) =>
    `<img src=./src/img/${firstMatch.toLowerCase()}.png height=15px />`
)}}></div>

React.js 会将innerHTML设置为创建的字符串。

请注意，这两种情况都可能造成XSS漏洞！ source可能包含<script>或其他 HTML 元素。如果您希望解决此问题，您可以在替换其中的标记之前通过 HTML 编码器运行source(即 tagged = htmlEncode(source).replace(…) (。

相关文章：