代码之家 › 专栏 › 技术社区 › loretoparisi

如何匹配javascript中的单词并用表达式包围

regex javascript

loretoparisi · 技术社区 · 6 年前

我有一个纯文本 Lorem ipsum dolor sit amet 我想匹配一些像 Lorem 和 dolor 并用类似于 <strong>Lorem</strong> 和 <i>dolor</i> 它将包含匹配的单词,即regex匹配的结果。

所以我首先写下这个函数来匹配相同的表达式:

   function replaceTokens(text, tokens, expr) {
      var patterns = [], out;
      tokens.forEach(tuple => {
        var regex = new RegExp("(" + [tuple].join("[.,;:']?\\s*[.!?]?\\s*") + ")");
        var matches = text.match(regex);
        if (matches) {
          patterns.push(regex);
        }
      });
      var regex = combinePatterns.apply(this, patterns);
      out = text.replace(regex, expr);
      return out;
    }

哪里

function combinePatterns() {
  return new RegExp('(' + [].slice.call(arguments).map(function (e) {
    var e = e.toString()
    return '(?:' + e.substring(1, e.length - 1) + ')'
  }).join('|') + ')', "gi")
}

那就叫做

replaceTokens(text,text.split(/\s+/g),"<strong>$1</strong>")

这样可以,如下所示:

function replaceTokens(text, tokens, expr) {
  var patterns = [],
    out;
  tokens.forEach(tuple => {
    var regex = new RegExp("(" + [tuple].join("[.,;:']?\\s*[.!?]?\\s*") + ")");
    var matches = text.match(regex);
    if (matches) {
      patterns.push(regex);
    }
  });
  var regex = combinePatterns.apply(this, patterns);
  out = text.replace(regex, expr);
  return out;
}


function combinePatterns() {
  return new RegExp('(' + [].slice.call(arguments).map(function(e) {
    var e = e.toString()
    return '(?:' + e.substring(1, e.length - 1) + ')'
  }).join('|') + ')', "gi")
}


var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
var rep = replaceTokens(text, ["Lorem", "dolor"], "<strong>$1</strong>")

document.getElementById("in").textContent = text;
document.getElementById("out").innerHTML = rep;

<div id="in"></div>
<hr>
<div id="out"></div>

现在,我想为每个令牌应用不同的表达式,因此考虑到它们之间的映射,我希望

function replaceTokens(text, tokens, expressions) {
  var patterns = [], out;
  tokens.forEach(tuple => {
    var regex = new RegExp("(" + [tuple].join("[.,;:']?\\s*[.!?]?\\s*") + ")");
    var matches = text.match(regex);
    if (matches) {
      patterns.push(regex);
    }
  });
  var regex = combinePatterns.apply(this, patterns);
  tokens.forEach(tuple => {
    out = text.replace(regex, expressions[tuple]);
  });
  return out;
}

哪里 expressions 将像

var expressions = {
  'Lorem': '<strong>$1</strong>',
  'dolor': '<i>$1</i>'
}

它将被称为

replaceTokens(text, ["Lorem", "dolor"], expressions)

结果是我只替换了第一个令牌,而没有替换其他令牌。

2 回复 | 直到 6 年前

Pluto 6 年前

尝试使用函数替换所需的内容。您可能需要设置全局标志。我改变了 expressions 对象,使其更具编程兼容性:

var expressions = {
  'Lorem': ['<strong>','</strong>'],
  'dolor': ['<i>','</i>']
};

text.replace(regex, function(match, p1) {
  return expressions[token].join(p1) });
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter

Poul Bak 6 年前

您只需将全局标志应用于regex,如下所示:

var regex = new RegExp("(" + [tuple].join("[.,;:']?\\s*[.!?]?\\s*") + ")", "g");

然后你应该得到所有的匹配。

JavaScript String match

“注意:如果正则表达式不包含g修饰符(执行全局搜索),match()方法将只返回字符串中的第一个匹配项。”