Using an HTML element to pass a variable into a replace function

Question

Using an HTML element to pass a variable into a replace function

I am looking to highlight a 'SearchString' by replacing it with

<span style="background-color: yellow">SearchString</span>

within a targetString.

The SearchString varies, so I am wondering how I can make this happen.

This is what I have attempted so far -

var applyHighlighting = function (highlightableElements, productFilterKeyword) {
for(var i =0; i< highlightableElements.length; i++){
    var regexp = new RegExp(productFilterKeyword, 'ig');
    var replaceKeyWord = highlightableElements[i].innerHTML.match(regexp);
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">replaceKeyWord</span>');
}

javascript jquery html css angularjs

Answer 1

Answer №1

If you want to use `$&` in your replacement regex, follow this code snippet:

highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">$&</span>');

For more detailed information, visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter

Take a look at this practical example which also stores the original string (an important detail):

var highlightableElements = document.getElementsByTagName('div');
for (var i = 0; i < highlightableElements.length; i++) {
  highlightableElements[i].origHTML = highlightableElements[i].innerHTML
}
var applyHighlighting = function(specificKeyword) {
  for (var i = 0; i < highlightableElements.length; i++) {
    highlightableElements[i].innerHTML = highlightableElements[i].origHTML;
    var regexp = new RegExp(specificKeyword, 'ig');
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">$&</span>');
  }
}

<input onkeyup="applyHighlighting(this.value)">
<div>Some example text here</div>
<div>Another sample HERE</div>

Answer 2

If you want to use `$&` in your replacement regex, follow this code snippet:

highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">$&</span>');

For more detailed information, visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter

Take a look at this practical example which also stores the original string (an important detail):

var highlightableElements = document.getElementsByTagName('div');
for (var i = 0; i < highlightableElements.length; i++) {
  highlightableElements[i].origHTML = highlightableElements[i].innerHTML
}
var applyHighlighting = function(specificKeyword) {
  for (var i = 0; i < highlightableElements.length; i++) {
    highlightableElements[i].innerHTML = highlightableElements[i].origHTML;
    var regexp = new RegExp(specificKeyword, 'ig');
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">$&</span>');
  }
}

<input onkeyup="applyHighlighting(this.value)">
<div>Some example text here</div>
<div>Another sample HERE</div>

Answer 3

Answer №2

The issue lies in your replacement string where a variable is used inside it instead of the actual value of the variable. To fix this problem, modify your code as follows:

...
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">' + replaceKeyWord + '</span>');
}

By making this change, you should be able to resolve any existing problems.

To simplify the code further, you can refactor it like so:

var applyHighlighting = function (highlightableElements, productFilterKeyword) {
for(var i =0; i< highlightableElements.length; i++){
    var regexp = new RegExp(productFilterKeyword, 'ig');
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">' + productFilterKeyword + '</span>');
}

If the aim is just to add HTML styling around an existing word, there's no need to complicate by calculating a replacement keyword.

Answer 4

The issue lies in your replacement string where a variable is used inside it instead of the actual value of the variable. To fix this problem, modify your code as follows:

...
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">' + replaceKeyWord + '</span>');
}

By making this change, you should be able to resolve any existing problems.

To simplify the code further, you can refactor it like so:

var applyHighlighting = function (highlightableElements, productFilterKeyword) {
for(var i =0; i< highlightableElements.length; i++){
    var regexp = new RegExp(productFilterKeyword, 'ig');
    highlightableElements[i].innerHTML = highlightableElements[i].innerHTML.replace(regexp, '<span style="background-color: yellow">' + productFilterKeyword + '</span>');
}

If the aim is just to add HTML styling around an existing word, there's no need to complicate by calculating a replacement keyword.

Using an HTML element to pass a variable into a replace function

Answer №1

Answer №2

Similar questions

Issue with display of Favicon in Google Chrome browser

Include a scrollbar within a div element nested inside a table cell

Analyzing information through jsonParse

Can I determine if onSnapshot() has detected any updates prior to fetching the data?

Verification of email address is required, emails must be unique and not duplicated

The JavaScript function's if and else statements are being executed simultaneously

Clicking on a column or x-axis category in Highcharts will automatically include the job number in the page URL

Experiencing difficulties when establishing a connection between MongoDB and Node.js

Struggling to ensure buttons on my page respond and resize properly alongside the other elements

Fixing the error: Severity notice, there is an undefined variable called 'table'

How to modify the styling of an input element in React without directly manipulating the input itself

What is the best way to streamline JSON file data by selectively extracting necessary information?

Implementing multiple conditions in ng-class for dynamic styling

The content loses functionality once I add an overlay color to the background image div

Unexpected CSS counter reset issue encountered within nested elements

What was the reasoning behind Mozilla's decision to implement a conditional catch clause?

Troubleshooting image alignment problem within a flexbox display

The dojo array implemented a new element, pushing out the old one

Converting a string to Time format using JavaScript

Jquery div mysteriously disappearing without explanation