jQuery / Javascript:新的RegExp()停止循环

时间:2019-04-23 07:26:55

标签: javascript jquery regex for-loop

我正在执行翻译功能,我想轻松地在对象内添加翻译,然后在$("body").html()内全局更改每个翻译,问题是,当我在for循环内使用new RegExp()时,在第一次迭代后剪切循环。

if (window.location.href.indexOf("sv") > -1) {
    //CUSTOM TRANSLATIONS

    var translations = {
        'All': 'alla',
        'Filter Members': 'Filtrera medlemar',
    }



    for (var key in translations) {
        if (translations.hasOwnProperty(key)) {

            console.log(key + " -> " + translations[key]);
            $body = jQuery("body");
            replaceThis = new RegExp(key, "g");

            alert(replaceThis);

            $body.html($body.html().replace(replaceThis, translations[key]));

        }
    }

}

3 个答案:

答案 0 :(得分:2)

似乎您的body标签内包含脚本,因此您的脚本遇到错误。尝试在所有html上添加一个html容器元素,然后对该容器元素而不是主体执行操作。

var translations = {
  'All': 'alla',
  'Filter Members': 'Filtrera medlemar'
};

for (var key in translations) {
  if (translations.hasOwnProperty(key)) {

    //console.log(key + " -> " + translations[key]);
    $container = jQuery(".container");
    replaceThis = new RegExp(key, "g");

    //alert(replaceThis);

    $container.html($container.html().replace(replaceThis, translations[key]));

  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div>All</div>
  <div>Filter Members</div>
  <div>All</div>
  <div>Filter Members</div>
</div>

答案 1 :(得分:1)

在使用二维数组时,您需要将2个参数绑定到函数上,一个参数用于键,一个参数用于值。这个例子应该可以。

val baseConverted = ["-2","50","48"]

答案 2 :(得分:0)

问题

  • 请勿定位<html><body>标签,窗口或文档-定位嵌套在<body>中的元素作为Aggarwal先生的answer和iArcadia的元素评论建议。

  • iArcadia的评论还指出,这里有多余的代码:translations.hasOwnProperty(key)

  • 正如Stribiżew先生在评论中指出的那样,应该对通过RegExp对象传递的搜索字符串进行转义。在不转义给定字符串的情况下,会出现不想要的结果,例如:

    • 匹配的子字符串(例如,搜索字符串:所有匹配: 所有 igator

      < / li>
    • 匹配的HTML标签(例如搜索字符串: class 匹配项: <div class ="...>

解决方案

我刚刚编写了一个名为 .translateWord()的快速jQuery插件:

用法$(selector).translateWord(matrix)
Param:
selector {string}:CSS / jQuery选择器字符串语法
matrix {array}:键/值对的二维数组

它将给定的数组数组( matrix )转换为ES6地图( dictionary )。每个键( keyword )被转义( escape ):

`(?!(?:[^<]+>|[^>]+<\\/a>))\\b(${keyword})\\b`

然后通过RegExp()对象( regex )传递,该对象依次搜索并替换为与 dictionary 键对应的 dictionary

let en2sv = [
  ['them', 'dem'],
  ['you', 'du'],
  ["I'm", 'Jag är'],
  ['was', 'var']
];

(function($) {
  $.fn.translateWord = function(matrix) {
    let dictionary = new Map(matrix);
    for (let keyword of dictionary.keys()) {
      let string = $(this).html();
      let escape = `(?!(?:[^<]+>|[^>]+<\\/a>))\\b(${keyword})\\b`;
      let regex = new RegExp(escape, "gi");
      let html = string.replace(regex, `<mark>${dictionary.get(keyword)}</mark>`);
      $(this).html(html);
    }
  }
})(jQuery);

$('main').translateWord(en2sv);
<main>
  <article>
    <h1>HEISENBERG IPSUM</h1>
    <section>
      <h2>I</h2>
      <p>What? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why
        don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE!</p>
    </section>
    <section>
      <h2>II</h2>
      <p>You... are trouble. I'm sorry the kid here doesn't see it, but I sure as hell do. You are a time bomb. Tick, tick, ticking. And I have no intention of being around for the boom. Well... you know how they say, it's been a pleasure? It hasn't.</p>
    </section>
    <section>
      <h2>III</h2>
      <p>Walter, I'm your lawyer. Anything you say to me is totally privileged. I'm not in the shakedown racket. I'm a lawyer. Even drug dealers need lawyers, right? Especially drug dealers.</p>
    </section>
    <section>
      <h2>IV</h2>
      <p>My partner was about to get himself shot. I intervened. He was angry because those two dealers of yours had just murdered an eleven year-old boy. Then again, maybe he thought it was you who gave the order. </p>
    </section>
  </article>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>