时间戳

首页 > 解决方案 > 如何根据某些分隔符解析 html 字符串？

javascript - 如何根据某些分隔符解析 html 字符串？

问题描述

#202020#<font face="Helvetica">this is string entered by a # user #202021# </font><b style=""><font face="Helvetica Neue" style="">#<u>001</u>10#&nbsp;</font></b>

预期结果： #202020#<font face="Helvetica">this is string entered by a # user #202021# </font><b style=""><font face="Helvetica Neue" style="">#00110#<u></u>&nbsp;</font></b>

给定一个像上面这样的 html 字符串，我希望能够重新排列由 '#' 分隔的字符和它们之间包含的 5 位数字。

现在我一直在尝试使用正则表达式来剥离 html，然后根据 '#' 进行拆分，但它不起作用，因为可能有一个 '#' 不是我的 '#' 降价的一部分。我也不知道如何重新组合字符串块、hmtl 标记和“#”数字块的拆分数组。我是否剥离或移出字符串的 '#12345#' 部分的样式并不重要，只要这些字符被分组，因此它们可以任意移动或环绕散列降价。

上面的原因是我有一个所见即所得的组件，它需要存储这个“#12345#”格式的降价，在服务器上它被转换为基于查找表的 url。在保存时，我希望能够格式化“#”降价。我使用的所见即所得编辑器是 react-summernote。

标签： javascriptregexhtml-parsing

解决方案

您可以使用string.replace、正则表达式和回调来执行此操作。正则表达式

/#([^#]*\d)#/g

查找两个#封闭的数字和任何不是#.

在回调中，您删除所有非数字字符，并计算剩余的数字。如果有五个数字，则返回包含在 中的数字#，否则，您什么也不做，只返回原始标签。

您还可以使用积极的前瞻和后瞻来不捕获#，在这种情况下，您在替换标签时不需要包含哈希

/(?<=#)([^#]*\d)(?=#)/g


const func = str => str.replace(/(?<=#)([^#]*\d)(?=#)/g, (a, tag) => {
  const numbers = tag.replace(/\D/g, ''); // remove non-digits
  if (numbers.length === 5) {
    return numbers; // return the numbers part of the tag
  }
  return tag; // return tag untouched
});

console.log(func('#12<b>345</b>6#'));
console.log(func('#1<b>2</b>34#'));
console.log(func('#12345#'));
console.log(func('#1<b>234</b>5#'));

推荐阅读