Необходимо определить полное слово из поиска, который содержит совпадение подстроки

Question

Я ищу текст, содержащийся в нескольких DIVS, в поисках вхождения подстроки в строке.

Пример: поиск «1-го», поиск совпадения в строке (101-й), а затем яхочу заменить всю строку (101-ю) другой строкой (сто первой).

Я могу найти вхождение, но не могу понять, как вернуть ВСЁ слово, в котором встречается подстрока, чтобы заменить его,

Сценарий: DIVS содержит маршруты, содержащие номера улиц. Я преобразовываю пронумерованные улицы в слова, чтобы текст в речевой движок правильно произносил числа. Таким образом, может быть 91-й, который я заменил бы на девяносто первый, или 21-й, который я бы заменил на двадцать первый. У меня уже есть функция, которая позаботится о любых возможных комбинациях заменяющих слов. Мне просто нужно выяснить, как захватить всю строку вхождения для реализации replace ().

Причина, по которой мне нужна вся строка (слово), в котором находится вхождение, заключается в том, чтоfunction numberToWords.toWordsOrdinal () Я передам строку, которая возьмет всю строку (101-ю) и преобразует ее в сотню первую. Я ищу все числа, заканчивающиеся на 0-й, 1-й, 2-й, 3-й, 4-й,5, 6, 7, 8 и 9 и преобразование в версию слова чисел. Любые числа, которые не содержат порядковый номер, будут оставлены в покое.

Вот код, который у меня есть:

$("div.dirInstruction").each(function() {
  if ($(this).text().indexOf("1st") >= 0) {
    // found occurrence
    alert($(this).text()); // < ---- for visual debug - returns all text in div of match
    var StringThatContainsMatch = ?????;  <----- need whole word that contained match
    var replaceNumber = numberToWords.toWordsOrdinal(StringThatContainsMatch);
    var new_word = $(this).text().replace(StringThatContainsMatch, replaceNumber);
    $(this).text(new_text);
  }
});

Answer 1

Поскольку у вас уже есть функция, которая заботится о сложной части, вы можете использовать .replace с функцией-заменителем, которая принимает соответствующие цифры и заменяет их соответствующей строкой, взятой из вызова другой функции:

function translateDigits(_, digits) {
  // Logic to turn, eg, 101 into "one hundred first"
  return 'one hundred first';
}

$("div.dirInstruction").each(function(){
  this.textContent = this.textContent.replace(
    /(\d+)st\b/g,
    translateDigits
  )
});

\d+ будет соответствовать цифрам, за которыми следует st и граница слова, и затем они будут переданы translateDigits в качестве второго аргумента (первый аргумент - это целоесовпавшая строка, которая не нужна - нам не нужно смотреть на st).

Чтобы также сопоставить слова, оканчивающиеся на другие числовые терминаторы, также чередуйте с ними st:

function translateDigits(_, digits) {
  // Logic to turn, eg, 101 into "one hundred first"
  return 'one hundred first';
}

$("div.dirInstruction").each(function(){
  this.textContent = this.textContent.replace(
    /(\d+)(?:st|nd|rd|th)\b/g,
    translateDigits
  )
});

Часть (?:st|nd|rd|th) поможет сопоставить номера строк 1-й / 2-й / 3-й / 4-й и т. Д.

Answer 2

Вы заранее знаете содержание, присутствующее в dirInstructions, и вы упомянули, что знаете, как преобразовать число в слово (как минимум два вопроса, использующих JavaScript для преобразования чисел в слова, а также stackoverflow.com/q/14766951/5675325 иstackoverflow.com/q/5529934/5675325)

Итак, я предлагаю следующие шаги

1. Создание массива JavaScript из содержимого, присутствующего в div.
2. Создайте функцию JavaScript, которая принимает два аргумента - ввод пользователя и массив, созданный на шаге 1.

Автозаполнение не является чем-то новым, и рабочий пример можно найти в W3schools .

Answer 3

$("div.dirInstruction").each(function() {
  if ($(this).text().indexOf("1st") >= 0) {
    var new_word = $(this).text().replace(/1st/g, "one hundred first");
    $(this).text(new_word);
  }
});

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

<div class="dirInstruction">101st</div>
<div class="dirInstruction">1000001st</div>
<div class="dirInstruction">1st</div>
<div class="dirInstruction">addasd1stbbb</div>
<div class="dirInstruction">1st1st1st</div>

Заменить регулярным выражением.