JQuery / Javascript: новый RegExp () останавливает цикл - PullRequest
Новая
       2

JQuery / Javascript: новый RegExp () останавливает цикл

0 голосов
/ 23 апреля 2019

Я делаю функцию перевода и хочу легко добавить переводы внутри объекта, а затем изменить каждый глобально внутри $("body").html(), проблема в том, что когда я использую new RegExp() внутри цикла for, он обрезает цикл послепервая итерация. 

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 ]

2 голосов
/ 23 апреля 2019

Кажется, у вас есть скрипт внутри вашего тега 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 голос
/ 23 апреля 2019

Поскольку вы используете двумерный массив, вам нужно привязать 2 параметра к вашей функции, один для ключа и один для значения. Этот пример должен работать. 

jQuery.each( translations, function( key, value ) {
  console.log(key + " -> " + translations[key]);
  $body =  jQuery("body");
  replaceThis = new RegExp(key, "g");
  alert(replaceThis);
  $body.html($body.html().replace(replaceThis, translations[key]));
});
0 голосов
/ 23 апреля 2019

Вопросы

  • Не нацеливайтесь на теги <html> или <body>, а на окно или документ - нацеливайте элемент, вложенный в <body>, как подсказывает ответ мистера Аггарвала и комментарий iArcadia.

  • В комментариях iArcadia также указывается, что существует лишний код: translations.hasOwnProperty(key)

  • Строка поиска, передаваемая через объект RegExp, должна быть экранирована, как указал г-н Стрибижев в комментариях. Без экранирования заданной строки получаются нежелательные результаты, такие как:

    • соответствующие подстроки (например, строка поиска: все совпадения: все igator)

    • соответствующие HTML-теги (например, строка поиска: класс совпадения: <div класс ="...>)

Решение

Я только что написал быстрый плагин jQuery под названием .translateWord () :

Использование: $(selector).translateWord(matrix)
Параметр:
selector {string}: синтаксис строки селектора CSS / jQuery
matrix {массив}: двумерный массив пар ключ / значение

Преобразует заданный массив массивов ( matrix ) в карту ES6 ( словарь ). Каждый ключ ( ключевое слово ) экранируется ( 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...