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

What is the process for unit-testing a compiled template with the "controller as" approach?

The program encountered an issue: Initialization must be completed before utilizing hooks

Tips for preserving user input from HTML into a text file and then reloading it back into the HTML document

divs aligned vertically on opposite edges of the webpage

Having trouble using Selenium for Chrome to locate an element in an HTML file using C#?

Utilizing reusable functionalities within Vuex

Using Jquery Functions within Codeigniter

Is it time to use JQuery post-DocumentReady?

difficulties arise when adjusting font size in html and css

Are the functionalities of my code implemented with Node.js and callback functions comparable to Java Threads?

Tips on saving additional parameters in an API URL with AngularJS

The element is unclickable due to being obstructed by another element

Need help automating clicking the download csv button with Selenium Python, but the button's class name changes when it's hovered over?

Retrieve data from HTML in order to apply styling to an element

The variable $ has not been defined in Jquery framework

Enhancing User Experience with CSS Transitions for Faster Page Loading

What is the best way to reach nested iframes?

Emphasize specific letters in a word by making them bold, according to the user

Using ng-repeat to iterate over forms in AngularJS

Conceal an element along with its space, then signal the application to show alternative content using React