CODEWITHSUNDEEP
javascriptjquery
Rodney
Rodney

Reputation: 624

Need to determine complete word from search that contains substring match

I am searching through text contained in multiple DIVS looking for an occurrence of a substring within a string.

Example: Searching for '1st', finding a match in the string (101st), and then i want to replace the entire string (101st) with another string (one hundred first).

I can locate the occurrence, but I can't figure out how to return the ENTIRE word the substring occurs in to replace it.

The scenario: The DIVS contain driving directions that contains street numbers. I am converting the numbered streets to words in order for the text to speech engine to correctly pronounce the numbers. So there may be a 91st which I would replace with ninety first, or a 21st that I would replace with twenty first. I have a function already written that will take care of any possible combinations of replacement words. I just need to figure out how to capture the entire string of the occurrence to implement the replace().

The reason I need the entire string (word) that the occurrence is in, is because the function numberToWords.toWordsOrdinal() I will pass the string to will take the entire string (101st) and convert it to one hundred first. I'm searching for all numbers ending in 0th, 1st, 2nd, 3rd, 4th, 5th, 6th, 7th, 8th and 9th and converting to the word version of the numbers. Any numbers that do not contain an ordinal will be left alone.

Here is the code I have:

$("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);
  }
});

Upvotes: 0

Views: 78

Answers (3)

Tiago Peres
Tiago Peres

Reputation: 15441

You know beforehand the content present in dirInstructions and you mention to know how to convert from number into word (There's at least two questions using JavaScript to convert numbers into words as well Convert digits into words with JavaScript and JavaScript numbers to Words)

So, i suggest the following steps

  1. Create a JavaScript array from the content present in the divs.
  2. Create a JavaScript function that takes two arguments - the user's input and the array created in Step 1.

Autocompletion isn't something new and a working example can be found in W3schools.

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370679

Since you already have a function that takes care of the hard part, you can use .replace with a replacer function that takes in the matched digits, and replaces them with the appropriate string, taken from the other function call:

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
  )
});

The \d+ will match the digits which are followed by st and a word boundary, and then they'll be passed to translateDigits as the second argument (the first argument is the whole matched string, which isn't needed - we don't need to look at the st).

To also match words ending in other numeric-terminators, alternate the st with them as well:

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
  )
});

The (?:st|nd|rd|th) part will help match number strings 1st / 2nd / 3rd / 4th etc.

Upvotes: 2

sugars
sugars

Reputation: 1493

$("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>

Replace with a regular expression.

Upvotes: 0

Related Questions