记录一个比较有意思的问题,标签里面的数据进行替换,正则

<h3 class='ql-align-right'><strong style='color: rgb(255, 153, 0);'><em><u>你好吗</u></em></strong></h3>

需求是这样的, 这个html字符串会转换成一个原生输入框,里面文字是可以替换的。 html的标签映射成原生android 的属性, 输入框里面是“ 你好吗” 三个字。如果更改了 你好吗 这三个字后需要替换整个带标签的字符串。

问题来了 如果我用 replaceAll 将你好吗替换成我想要输入的文字, 没问题。 但是如果输入的是u呢 或者是255 152 0 这些是在标签里面就带有的数据呢? 那很明显直接全部替换是不能行的。

那我的思路是 找锚点一起替换 html 标签它是一一对应关系的，所以我通过正则找到最里层的一个标签组 <u>xxx</u>，表达式为<.>.*?</.>， 然后再将 u 标签里面的内容替换成自己想变成的数据 通过u标签的 > <锚点来进行, 这个肯定能将数据找到并替换 replaceAll(RegExp(">.*<"), ">$updateText<") 那么u标签里面内容就变成了 <u>刷新过的数据了</u> 然后再对完整的字符串进行替换。

String _replaceHtmlBQContent(String defaultText,String updateText){
  String replaceAllTxt;
  if (RegExp('<[^>]+>').hasMatch(defaultText)) {
    //如果要替换,必须使用这个includeBqGroup,不然可能会出现字符串替换到样式里面
    String includeBqGroup = RegExp('<.>.*?</.>').firstMatch(defaultText).group(0);
    String value = includeBqGroup.replaceAll(RegExp(">.*<"), ">$updateText<");
    replaceAllTxt = defaultText.replaceAll(includeBqGroup, value);
  } else {
    replaceAllTxt = defaultText;
  }
  return replaceAllTxt;
}

还有另一个办法, 貌似更好用 因为标签都是对称的, 所以将标签个数 /2 得到中间标签

  String htmlData = "<h3 class='ql-align-right'><strong style='color: rgb(255, 153, 0);'><em><u></u></em></strong></h3>";
  String tihuanzhi = "你好吗";

  List<RegExpMatch> allMatch = RegExp('<[^>]+>').allMatches(htmlData).toList();
  int position = allMatch.length ~/ 2.toInt();

  RegExpMatch endMatch = allMatch[position - 1];
  print('结束位置 ${endMatch.end}');

  RegExpMatch startMatch = allMatch[position];
  print('开始位置 ${startMatch.start}');

  String content = htmlData.replaceRange(endMatch.end,startMatch.start, tihuanzhi);
  print('$content');

看这个正则
https://tool.oschina.net/uploads/apidocs/jquery/regexp.html

<[^>]+>

[^] 表示字符串里面不包含的
< 表示开始是 这个尖括号
<[^>] 表示找到所有 < 开头但是不包含> 的字符串

• 匹配前面的子表达式一次或多次。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。

结尾字符

所以加在一起就是 <[^>]+ 用<开头 碰到>就结束, 然后末尾加 > 就可以去掉所有html标签了

"<p class="ql-align-center">姓名: 代瑶</p>"
group 1 是第一个括号里面的值 例如 RegExp('class="([^"]+)"').firstMatch(htmlData);