Обычный углубленный JavaScript и 10 очень интересных регулярных боев

JavaScript регулярное выражение
Обычный углубленный JavaScript и 10 очень интересных регулярных боев

предисловие

Знакомые со мной друзья могут знать, что я никогда не писал на злободневные темы. Почему бы не написать это? Это потому, что я не слежу за горячими точками? Не совсем. Я до сих пор очень обеспокоен некоторыми событиями, и у меня действительно много мыслей и мнений. Но я всегда придерживался одного принципа, а именно:сделать контент живым.

Для фронтенд-инженеров регулярное выражение может бытьjavascriptСамый малопонятный язык в языке, но зачастую и самый лаконичный.Многие проблемы, возникающие в работе, такие как поиск, нахождение, выделение ключевых слов и т.д., легко решаются с помощью регулярных выражений, поэтому есть хорошая поговорка:

Регулярное использование — это хорошо, работайте сверхурочно вдали от меня.

Сегодня я пересмотрюjavascriptНекоторые навыки использования и расширенный API регулярных выражений, а также несколько практических примеров, чтобы показать прелесть регулярных выражений.Если вы чувствуете, что регулярные выражения сложны для понимания, вы также можете использовать следующий онлайн-сайт, просто введите регулярное выражение, он может отображать ваше регулярное выражение графически:

ты получишь

  • Использование сопоставления с образцом (x)
  • Сопоставление с образцом для незахватывающих скобок (?:x)
  • Предварительное утверждение x(?=y)
  • Утверждение просмотра назад (?
  • Положительный Отрицательный Найти x(?!y)
  • Обратный отрицательный поиск (?
  • Использование набора символов и обратного набора символов [xyz]/[^xyz]
  • граница слова и сопоставление границы без слова /b/B
  • Пробелы/не пробелы соответствуют /s/S
  • Совпадение одного символа/не одного символа /w/W
  • 10 лучших случаев регулярного применения

текст

Для регулярного базового использования здесь я не являюсь автором подведения итогов, здесь основное внимание уделяется некоторым из наиболее полезных и тайных знаний.Я напишу последние 10 обычных классических случаев для их изучения или использования непосредственно в работе.Далее автор напишет несколько примеров, поясняющих применение вышеизложенных пунктов.

Использование сопоставления с образцом (x)

Сопоставление с образцом в основном используется для сопоставления строки определенного типа и запоминания совпадения.

кейс:

let str = 'xuxi is xuxi is'
let reg = /(xuxi) (is) \1 \2/g
reg.test(str)  // true    (1)
str.replace(reg, '$1 $2')  // xuxi is  (2)

объяснять: Где скобки называются захватывающими скобками, а \ 1 и \ 2 в шаблоне указывают на то, что первые и вторая подстроки, сопоставляющие складки скобки, а именно XUXI и IS, соответствуют последним двум словам в исходной строке, поэтому результат Бег в (1) верно. Когда мы используем замену в строке, мы можем использовать1,1, 2 Таким образом, получается n-е совпадение, которое используется для замены строки, как, например, текущий результат в (2).

Сопоставление с образцом для незахватывающих скобок (?:x)

В основном используется для сопоставления определенного типа строки, но не запоминает совпадение.

кейс:

let str = 'xuxixuxi'
let reg = /(?:xuxi){1,2}/g
reg.test(str)  // true    (1)

объяснять: Где (?:) называется незахватывающими круглыми скобками, мы можем использовать его для сопоставления набора символов, но не запоминать символ, обычно используемый для определения того, существует ли определенный тип символа в строке.

Предварительное утверждение x(?=y)

опережающее утверждение: соответствует 'x', только если за 'x' следует 'y'.

кейс:

let str = '王者融化'
let reg = /王(?=者)/
reg.test(str)  // true    (1)

объяснять: /wang(?=人)/ будет соответствовать «королю», только если за ним следует «человек», но «человек» не является частью результата сопоставления.

Утверждение просмотра назад (?

ретроспективное утверждение: соответствует 'x', только если 'x' предшествует 'y'.

кейс:

let str = 'xuxiA'
let reg = /(?<=xuxi)A/
reg.test(str)  // true    (1)

объяснять: /(?

Положительный Отрицательный Найти x(?!y)

Прямой отрицательный поиск: соответствует 'x', только если за 'x' не следует 'y'.

кейс:

let str = '3.1415'
let reg = /\d+(?!\.)/
reg.exec(str)  // [1415]   (1)

объяснять: где /\d+(?!.)/ соответствует одной или нескольким цифрам тогда и только тогда, когда после нее нет десятичной точки, поэтому (1) будет соответствовать 1415 вместо 3,1415.

Обратный отрицательный поиск (?

обратный отрицательный поиск: Соответствует 'x', только если 'x' не предшествует 'y'.

кейс:

let str = '3.1415'
let reg = /(?<!\.)\d+/
reg.exec(str)  // [3]    (1)

объяснять: /(?

Использование набора символов и обратного набора символов [xyz] / [^xyz]

[xyz]: набор символов. Соответствует любому символу в квадратных скобках, включая escape-последовательности. Вы можете использовать тире (-), чтобы указать диапазон символов.

[^xyz]: обратный набор символов. То есть он соответствует любому символу, не заключенному в квадратные скобки. Вы можете использовать тире (-), чтобы указать диапазон символов. Здесь подойдет любой обычный персонаж

кейс:

let str = 'abcd'
let reg1 = /[a-c]+/
let reg2 = /[^d]$/
reg1.test(str)  // true    (1)
reg2.test(str)  // false    (2)

объяснять: (1) вернет true, потому что строка содержит символы от a до c, (2) вернет false, потому что строка заканчивается на d, но регулярная reg2 должна соответствовать строкам, которые не заканчиваются на d.

Сопоставление границ слов и границ без слов\b\B

\b соответствует границе слова. Граница слова — это позиция, в которой за словом не следует другой символ «слова» или ему не предшествует другой символ «слова», например, между буквой и пробелом. Обратите внимание, что совпадающие границы слов не включаются в сопоставление. Другими словами, длина содержимого совпадающей границы слова равна 0.

\B соответствует границе слова. Сопоставьте следующие ситуации:

(1) Первый символ строки не является «словным» символом. (2) Последний символ строки не является «словным» символом. (3) Между двумя символами слова (4) Между двумя символами, не являющимися словами (5) пустая строка

кейс:

let str = 'xuxi'
let reg1 = /xi\b/
let reg2 = /xu\B/
reg1.exec(str)  // [xi]    (1)
reg2.exec(str)  // [xu]    (2)

объяснять: В (1) сопоставляется граница слова, то есть xi, который является концом строки, в (2) xu не должна быть границей слова, поэтому она будет соответствовать ей.

Пробелы/не пробелы соответствуют \s\S

\s: соответствует символу пробела, включая пробелы, табуляции, переводы форм и новые строки.

\S: соответствует непробельному символу

кейс:

let str = 'xuxi is'
let reg1 = /.*\s/g
let reg2 = /\S\w*/g
reg1.exec(str)  // [xuxi]    (1)
reg2.exec(str)  // [xuxi]    (2)

объяснять: Оба (1) и (2) будут соответствовать xuxi после выполнения, одно — совпадение перед символом пробела, а другое — совпадение символа, отличного от пробела.

Совпадение одного символа/не одного символа \w/W

\w: соответствует символу, состоящему из одного слова (буква, цифра или символ подчеркивания). Эквивалент [A-Za-z0-9_].

\W: соответствует символу, не являющемуся словом. Эквивалент [^A-Za-z0-9_]

Поскольку вышеупомянутые два режима относительно просты, мы не будем вводить их здесь один за другим.

10 лучших случаев регулярного применения

Далее автор резюмирует несколько практических применений регуляризации для вашего изучения и справки.

1. Удалить тег указанного элемента в строке

function trimTag(tagName, htmlStr) {
  let reg = new RegExp(`<${tagName}(\\s.*)*>(\\n|.)*<\\/${tagName}>`, "g")
  return htmlStr.replace(reg, '')
}

2. Нейминг тире, чтобы горбатый нейминг

// 短横线转驼峰命名, flag = 0为小驼峰, 1为大驼峰
function toCamelCase(str, flag = 0) {
  if(flag) {
    return str[0].toUpperCase() + str.slice(1).replace(/-(\w)/g, ($0, $1) => $1.toUpperCase())
  }else {
    return str.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase())
  }
}

3. Реализуйте простой механизм шаблонов

Что касается реализации шаблонизатора, то в реализации используется много закономерностей, тем, кто интересуется, рекомендуется посмотреть непосредственно на него.Внедрить простой шаблонный двигатель.

4. Удалить пробелы из строки

function trimAll(str) {
  return str.replace(/\s*/g,"")
}

5. Оценка правомерности ввода данных в указанном формате

function numCheck(str, specialNum) {
  if(str.indexOf(',') > -1) {
      return str.split(',').every(item=>this.numCheck(item));
  } else {
      return str.split(specialNum).length === 2;
  }
}

6. Удалите поля с пустыми значениями в строке параметров URL

// 去除url参数字符串中值为空的字段
const trimParmas = (parmaStr:string = '') => {
  return parmaStr.replace(/((\w*?)=&|(&\w*?=)$)/g, '')
}

7. Преобразование строки параметра браузера в объект параметра

function unParams(params = '?a=1&b=2&c=3') {
  let obj = {}
  params && params.replace(/((\w*)=([\.a-z0-9A-Z]*)?)?/g, (m,a,b,c) => {
    if(b || c) obj[b] = c
  })
  return obj
}

8. Подсчитайте количество байтов в строке

/**
 * 计算字符串字节数
 * @param str
 * @desc 一个中文占2个字节, 一个英文占一个字节
 */
function computeStringByte(str) {
  let size = 0,
  strArr = str.split(''),
  reg = /[\u4e00-\u9fa5]/   // 判断是否为中文
  for(let i = strArr.length; i--; i>=0) {
    if(reg.test(strArr[i])) { 
      size+= 2
    }else {
      size += 1
    }
  }
  return size
}

9. Содержит ли совпадение китайские иероглифы

function hasCn(str) {
  let reg = /[\u4e00-\u9fa5]/g
  return reg.test(str)
}

10. Реализовать ассоциативную функцию поиска

function searchLink(keyword) {
  // 模拟后端返回数据
  let list = ['abc', 'ab', 'a', 'bcd', 'edf', 'abd'];
  let reg = new RegExp(keyword, 'i');
  return list.filter(item => reg.test(item))
}

наконец

Если вы хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реальных сражений, добро пожаловать в нашу техническую группу в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

больше рекомендаций

Категории