Modify the appearance of every instance of a specific phrase

Question

Modify the appearance of every instance of a specific phrase

Looking to give my site title a unique font separate from the rest of the content every time it appears in a heading. This is all for branding purposes. Let's say my custom font is Courier and my company goes by the name SparklePony. For example, if there was a line like,

<h1 class="title">SparklePony Board of Directors</h1>

the word SparklePony would be styled in Courier while the rest of the heading remains in Arial, the default font of my site. (I understand this combination may not look the best.)

I've attempted using jQuery string replacement but I don't want to actually replace the string entirely – instead, I just want to see that specific word in Courier by adding a class or something similar. Whenever I tried replacing SparklePony with

<span class="sparkle-pony">SparklePony</span>

, the whole messy string with tags displayed on my site without effectively adding the desired class.

Is there an error in how I'm implementing my string replace, or perhaps there's a more effective method to style every instance of a particular string?

javascript jquery css stylesheet markup

Answer 1

Answer №1

To achieve this, you can specify the selector as #('h1') or by class.

$('.title').html(function(i,v){    
   return v.replace(/SparklePony/g,'<span class="sparkle">SparklePony</span>');
});

http://jsfiddle.net/cQjsu/

Answer 2

To achieve this, you can specify the selector as #('h1') or by class.

$('.title').html(function(i,v){    
   return v.replace(/SparklePony/g,'<span class="sparkle">SparklePony</span>');
});

http://jsfiddle.net/cQjsu/

Answer 3

Answer №2

It appears that without reviewing the actual code (which is crucial in situations like this), my assumption is that you may be utilizing .text() rather than .html(), which would effectively interpret the HTML content.

Answer 4

It appears that without reviewing the actual code (which is crucial in situations like this), my assumption is that you may be utilizing .text() rather than .html(), which would effectively interpret the HTML content.

Answer 5

Answer №3

If a little organization is applied, this could serve as a solid foundation: http://jsfiddle.net/c24w/Fznh4/9/.

HTML

<div id="title">Highlight this blah blah HiGhLiGhT THIS blah</div>
<button id="clickme">Click to highlight text</button>

CSS

#title{
  font-family: sans-serif;
  font-size: 20pt;
  margin: 30px 0;
}
span.highlight{
  color: #09f;
  font-weight: bold;
}

JavaScript

function highlightText(element, phrase, allOccurrences, caseSensitive){
  var modifiers = (allOccurrences ? 'g' : '') + (caseSensitive ? '' : 'i');
  var text = element.innerHTML;
  element.innerHTML = text.replace(new RegExp(phrase, modifiers), function(match){
    return '<span class="highlight">' + match + '</span>';
  });
}

var button = document.getElementById('clickme');
var el = document.getElementById('title');

button.onclick = function(){
  highlightText(el, 'highlight this', true, false);
  button.onclick = null;
};

Answer 6

If a little organization is applied, this could serve as a solid foundation: http://jsfiddle.net/c24w/Fznh4/9/.

HTML

<div id="title">Highlight this blah blah HiGhLiGhT THIS blah</div>
<button id="clickme">Click to highlight text</button>

CSS

#title{
  font-family: sans-serif;
  font-size: 20pt;
  margin: 30px 0;
}
span.highlight{
  color: #09f;
  font-weight: bold;
}

JavaScript

function highlightText(element, phrase, allOccurrences, caseSensitive){
  var modifiers = (allOccurrences ? 'g' : '') + (caseSensitive ? '' : 'i');
  var text = element.innerHTML;
  element.innerHTML = text.replace(new RegExp(phrase, modifiers), function(match){
    return '<span class="highlight">' + match + '</span>';
  });
}

var button = document.getElementById('clickme');
var el = document.getElementById('title');

button.onclick = function(){
  highlightText(el, 'highlight this', true, false);
  button.onclick = null;
};

Answer 7

Answer №4

Consider attempting this approach:

Utilize the following code snippet to modify elements with the class 'title':
$.each($(".title"), function() {
    $(this).html($(this).html().replace("SparklePony", "<span class='sparkle-pony'>SparklePony</span>"));
});

Answer 8

Consider attempting this approach:

Utilize the following code snippet to modify elements with the class 'title':
$.each($(".title"), function() {
    $(this).html($(this).html().replace("SparklePony", "<span class='sparkle-pony'>SparklePony</span>"));
});

Answer 9

Answer №5

Short and sweet:

let $pageContent = $("main");
$pageContent.html($pageContent.html().replace(/SparklePony/g, "<span class='cool'>SparklePony</span>"));

Just remember that using $("main") as the selector can be resource-intensive. It's better to choose a more specific parent element.

Check out the demo on JSFiddle here

Answer 10

Short and sweet:

let $pageContent = $("main");
$pageContent.html($pageContent.html().replace(/SparklePony/g, "<span class='cool'>SparklePony</span>"));

Just remember that using $("main") as the selector can be resource-intensive. It's better to choose a more specific parent element.

Check out the demo on JSFiddle here

Modify the appearance of every instance of a specific phrase

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Sliding Content Loading Animation with JQuery from the Right

Limit the ng-repeat directive based on the length of the array, using an ng-if condition

Weird Chrome behaviors with CSS3 animations

Adding a button to the right of a text-field input in Vuetify app

The Bootstrap dropdown menu is cut off and not fully visible on mobile devices

icon from font-awesome changes color when hovering over

Issue with Zeroclipboard not copying content when initially clicked

A step-by-step guide to building an API page with Python

"Here's a cool trick: A guide on dynamically inserting a value into {% url tag %} using JavaScript within

Utilize the jQuery ajaxForm plugin to retrieve the form ID and implement an upload progress bar

The function jQuery.each replaces the existing posts

The syntax comparison between CommonJS and AMD modules in a modular AngularJS application

Leveraging Scrapy/Selenium for populating fields and conducting searches on LinkedIn's advanced search page

Shift the Search bar to the last position on the navigation bar

Unable to receive response from Jquery ajax

How to position div elements side by side using CSS and center them, even on IE8

Leverage Pinia store in Vue helper functions

Help with parsing text in Javascript

A solitary outcome yielded by the JSON iteration

Retrieving information from React elements