时间戳

首页 > 解决方案 > Javascript（数据类型字符串的错误识别），匹配应该在引号内的单词

javascript - Javascript（数据类型字符串的错误识别），匹配应该在引号内的单词

问题描述

嗨，我正在尝试创建一个 javascript 代码编辑器，我假设您知道如何在 javascript 中创建字符串数据类型，所以我想要符号 (") "双引号" 或 (') '单引号内的每个单词' 到 i html 标记中。
所以我制造了一个混乱的情况，并尝试匹配一些应该在引号内的单词，就像我的期望一样。
这是我的字符串： 

`that's "that's" 'that's'. Hanna "loves" 'ice "cream`

期望这样的输出：

that's <i>that's</i> <i>that's</i>. Hanna <i>loves</i> ice cream


let str_ = `that's "that's" 'that's'. Hanna "loves" 'ice "cream`;
// expected output :
// that's <i>that's</i> <i>that's</i>. Hanna <i>loves</i> ice cream

标签： javascriptregexstringreplace

解决方案

从 OP 的示例中理所当然地认为有效引用的开头和结尾始终伴随至少一个前导空格和至少一个尾随空格的方法可能会出现这样的正则表达式/(?<space>\s+)(?<quote>['"])(?<text>\S+)\2/gm。它以命名形式使用捕获组。以下正则表达式与第一个相同，只是没有命名 ... 。它读起来像这样.../(\s+)(['"])(\S+)\2/gm

  • 第一捕获组(\s+)

    • \s匹配任何空白字符（相当于[\r\n\t\f\v ]）
    • +匹配前一个令牌一次到无限次，尽可能多次，根据需要回馈（贪婪）

  • 第二捕获组(['"])

    • 匹配下面列表中的单个字符['"]
      • '"匹配列表中的单个字符（区分大小写）

  • 第三捕获组(\S+)

    • \S匹配任何非空白字符（相当于[^\r\n\t\f\v ]）
    • +在一次和无限次之间匹配前一个令牌，尽可能多次，根据需要返回（贪婪） \2匹配与第二个捕获组最近匹配的相同文本

  • 全局模式标志

    • g修饰符：全局。所有比赛（第一场比赛后不返回）
    • m修饰符：多行。原因^并$匹配每行的开始/结束（不仅是字符串的开始/结束）

对于每个匹配，replacer 回调函数String.prototype.replace确实通过其参数提供匹配/捕获的数据，这对于返回的替换值是必需的。在这种情况下，可以访问(match, space, quote, text)这使得它可以${ space }<i>${ text }</i>作为计算的替换值返回。

由于此替换不会清理任何残缺/无效的引号，因此必须使用额外的替换（基于/(\s+)(['"])/gm）来跟踪它们，如以下示例代码的日志所示。

// // [https://regex101.com/r/frH2xQ/1] 
// const regXSpacedAndQuotedChars = (/(?<space>\s+)(?<quote>['"])(?<text>\S+)\2/gm);

// [https://regex101.com/r/frH2xQ/2] 
const regXSpacedAndQuotedChars = (/(\s+)(['"])(\S+)\2/gm);

// [https://regex101.com/r/frH2xQ/3/]
const regXSpacedAndSoleQuote = (/(\s+)(['"])/gm);

console.log(
  `that's "that's" 'that's'. Hanna "loves" 'ice "cream`
    .replace(regXSpacedAndQuotedChars, (match, space, quote, text) => `${ space }<i>${ text }</i>`)
);

console.log(
  `that's "that's" 'that's'. Hanna "loves" 'ice "cream`
    .replace(regXSpacedAndQuotedChars, (match, space, quote, text) => `${ space }<i>${ text }</i>`)
    .replace(regXSpacedAndSoleQuote, (match, space, quote) => space)
);
.as-console-wrapper { min-height: 100%!important; top: 0; }

推荐阅读