JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <ul>
     <li>This is</li>
     <li>A list</li>
     <li>And I want</li>
     <li>This should not be bold</li>
     <li>To wrap</li>
     <li>This</li>
     <li>strong</li>
     <li>li</li>
  </ul>
  <span><p><em>This is another random tag</em></p></span>
</div>

JavaScript

var list = [
  {
    original: 'This is',
    new: 'New this is'
  },
  {
    original: 'A list',
    new: 'New A list'
  },
  {
    original: 'And I want',
    new: 'New And I want'
  },
  {
    original: 'To wrap',
    new: 'New To wrap'
  },
  {
    original: 'li',
    new: 'bold'
  },
  {
    original: 'This',
    new: 'New This'
  },
  {
    original: 'strong',
    new: 'bold'
  },
  {
    original: 'This is another random tag',
    new: 'This is another random tag that should be bold'
  }
  
];


//I want for each expression in this array, to find that expression in array, replace-it and make-it bold with a <strong> tag.
var div = $('.wrap');
var htmlString = div.html();
var index = 0;
list.forEach(function(item, index){
  			
        console.log(index + ' Should replace: "' + item.original + '" with "'+ item.new + '"');
  
  			//I know that there is something here, but not sure what
  			index = htmlString.indexOf(item.original);
				var expressionLength = index + item.original.length;
				var substring = htmlString.substring(index, expressionLength);
				var desiredReplcement = substring.replace(item.original, '<strong>' + item.new + '</strong>');
				console.log('index', index);
				console.log('substring', substring);
				console.log('desiredReplcement', desiredReplcement);
  
  //Current implementation in replace looks in the full div, but I just want to replace in the substring mathced above;
  var replacement = '<strong>' + item.new + '</strong>';
	var newHTML = div.html().replace(item.original, replacement);
	div.html(newHTML);
});