Loop through text for multiple instances of same string

Question

I have a passage of text, which might have multiple of the same word in it. Whenever this word appears, I want to replace it with itself, but wrapped in a div so that I can apply styles and add some extra text.

I have got this working for the first instance of the word:

var definition = glossaryList[index].definition;
var termStart = textAsLower.search(termAsLower);
var termEnd = term.length + termStart;
var replacedText = addDefinitionToText(textContent, term, definition, termStart, termEnd);

function addDefinitionToText(textContent, term, definition, termStart, termEnd) {
    var textStart = textContent.substring(0, termStart);
    var termInText = textContent.substring(termStart, termEnd);
    var textEnd = textContent.substring(termEnd);

    var replacedTerm = '<span class="has-definition">' + termInText;
    replacedTerm += '<div class="attached-definition">';
    replacedTerm += '<div class="defintion-title">' + term + '</div>';
    replacedTerm += '<div class="definition-text">' + definition + '</div>';
    replacedTerm += '</div>';
    replacedTerm += '</span>';

    return textStart + replacedTerm + textEnd;
}

I've tried putting this function into a while loop and counting up, but it is causing me issues and freezing or not returning what I am expecting:

while(something.toLowerCase().search(termAsLower)) {
    var something = textAsLower.substring(termEnd);
    termStart = something.search(termAsLower);
    termEnd = term.length + termStart;
    replacedText = addDefinitionToText(something, term, definition, termStart, termEnd);
    something = replacedText.substring(termEnd);
}

Does anyone have a solution to this? Ideally I would actually like a different method to .search(), which finds all instances not just the first, but my searches haven't been too fruitful.

Thanks!

Srishti Gupta · Accepted Answer · 2019-01-24 12:02:38Z

1

You can simply use regex to achieve what you want:

var searchWord = "tag";
var textStr = "HTML tag is used for scripting. Tag can also be self-closing.";

// case-insensitive regex
var re = new RegExp(searchWord, "gi");
textStr = textStr.replace(re, '<' + searchWord + '>');

// case-sensitive search
var re = new RegExp(searchWord, "g");
textStr = textStr.replace(re, '<' + searchWord + '>');

answered Jan 24, 2019 at 12:02

Srishti Gupta

1,3131 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jock.perkins Over a year ago

Thank you this worked perfectly and was actually simpler than what I was doing to begin with.

konuralpt · Accepted Answer · 2019-01-24 11:49:54Z

1

I did something like this before. I split the text by spaces and put that array into foreach and edit. Here's an exapmle code

if(text.includes("http")){

   var returnString = '';

   text.split(" ").forEach(function(link) {

   if(link.includes("http")){
     returnString += '<a target="_blank" style="color:white" href="' + link + '">here</a> ';
   }else{
     returnString += link + " ";
   }

});

text = returnString;

answered Jan 24, 2019 at 11:49

konuralpt

2712 silver badges12 bronze badges

1 Comment

jock.perkins Over a year ago

Sadly I don't think this is going to work for me because I am not looking for just one word, I am looking for words and phrases, so for example I might need to find "two words" in a sentence which "looks like this and has two words, and also two words", if that makes sense?

barbsan · Accepted Answer · 2019-01-24 12:32:00Z

A regular expression with the String replace method can solve this fairly easily.

This function will return a new string with the word and definition wrapped.

I have used a template literal to make things a bit cleaner but they are unsupported in IE.

function wrapWordWithDefinition(sentance, word, definition) {
    var template = `<div>
             <div class="attached-definition">
             <div class="defintion-title">${word}</div>
             <div class="definition-text">${definition}</div>
         </div>
    </div>`;
    // global and case insensitive
    var re = new RegExp(word, 'gi'); 

    return sentance.replace(re, template);
}

var sentance = "This will replace word, when word is encountered";
var myword = "word";
var definition = "The definition of the word";
var result = wrapWordWithDefinition(sentance, myword, definition);
console.log(result)

For further reading on regular expressions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

Collectives™ on Stack Overflow

Loop through text for multiple instances of same string

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related