zoukankan      html  css  js  c++  java
  • 用正则匹配富文本中的文本,并替换其内容

    问题描述:

    有这样的一段字符串:

    "<p class='test' id='wise'>123 4>5<6 789<br>hello<span title='hello' style=' 200px;height:100px;' src='//www.wisewrong.com/img/123.png'>world</span></p>"

    这是一段包含了 html 标签信息的富文本,现在需要将其中的文本内容处理为全大写

    解决方案:

    function superTrim(str) {
      // 匹配标签之间的文本
      const reg = /(?<=>)(.|s)*?(?=</?w+[^<]*>)/g; 
      return str.replace(reg, s => s.toUpperCase());
    }
    const str = "<p class='test' id='wise'>123 4>5<6 789<br>hello<span title='hello' style=' 200px;height:100px;' src='//www.wisewrong.com/img/123.png'>world</span></p>";
    
    superTrim(str);
    // "<p class='test' id='wise'>123 4>5<6 789<br>HELLO<span title='hello' style=' 200px;height:100px;' src='//www.wisewrong.com/img/123.png'>WORLD</span></p>"

    重点在于正则的编写,这里推荐一个大佬自己做的专门交流正则的社区

    其次需要利用字符串的 replace 函数,当第一个入参是正则的时候,第二个参数可以用函数的形式来接受正则的匹配结果,且这个函数的返回值会用来替换被正则匹配到的字符串

    基于这个特性,只要正则匹配到了字符串,就可以随便处理了

    这里只是举了全大写的例子,实际上还可以做简繁转换、文本格式化等复杂功能

  • 相关阅读:
    开灯问题
    独木舟上的旅行
    剑指offer--从尾到头打印链表
    映芬视觉网页练习
    游标的使用
    数据库操作
    关系型数据库
    数据库基础知识
    TCPSocket系列二
    HTML5新标签与css3选择器
  • 原文地址:https://www.cnblogs.com/wisewrong/p/12931158.html
Copyright © 2011-2022 走看看