регулярное выражение для замены строк с img - js - PullRequest
Новая
       6

регулярное выражение для замены строк с img - js

0 голосов
/ 25 февраля 2019

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

{"a":"img1.jpg", "ab":"img2.jpg"}

мое текущее регулярное выражение: 

/(a|ab)/g

Когда у меня есть текст вроде: 

yeah abc

, он заменяет "a" вда с img1.jpg , но он также заменяет «ab» c на «img1.jpg».

Я могу избежать этого путем переключения /(ab|a)/, но это не может быть решением, так какУ меня огромный несортированный список json в качестве выражений (a, ab просто для простоты).Причина, по которой я это делаю, состоит в том, чтобы заменить родные смайлики изображениями.

Как я могу сказать, что он заменяет a только в том случае, если после b нет никаких символов?

1 Ответ

0 голосов
/ 25 февраля 2019

Сортируйте ключи эмодзи в порядке убывания, затем создайте свой шаблон регулярного выражения следующим образом: 

function replaceEmojis (str) {
  const emojis = {
    a: { src: 'imgA.jpg', color: 'red' },
    abc: { src: 'imgABC.jpg', color: 'green' },
    ab: { src: 'imgAB.jpg', color: 'blue' },
    bc: { src: 'imgBC.jpg', color: 'orange' }
  };
  
  const fnDescendingOrder = ([x, y]) => x > y ? -1 : +(x != y);

  const keys = Object.keys(emojis).sort((x, y) =>
    fnDescendingOrder(x.length == y.length ? [x, y] : [x.length, y.length])
  );

  const pattern = new RegExp(keys.join('|'), 'g');

  const transformed = str.replace(pattern, m => {
    const emoji = emojis[m];
    return '<img class="' + emoji.color + '" src="' + emoji.src + '">';
  });

  return transformed;
};

let str = 'yeah abc ab a abca bcaba';
result.innerHTML = replaceEmojis(str);
img { width: 10px; height: 100%; }
img.red { background: red; }
img.green { background: green; }
img.blue { background: blue; }
img.orange { background: orange; }
<div id="result"></div>

Вы должны отсортировать в порядке убывания сначала по длине, затем по алфавиту.Причина bc следует проверять после abc.

...