3

I need to change the color of a specific sub-string in a text. The text looks like this:

SOME TE<br>
XT IS HER<br>
E.

I tired the .replace() function from jquery, the problem with it is, that, as you can see above, the text is splited with those <br>'s. How can I "ignore" them ? For example I want to replace the String TEXT with <span class="color-red">TEXT</span>

Does anyone has an idea on how to solve this problem ?

Daniel Kobe
  • 9,376
  • 15
  • 62
  • 109
balex
  • 273
  • 1
  • 7
  • 18
  • http://stackoverflow.com/questions/8146648/jquery-find-text-and-replace. refer this – Ish Sep 05 '16 at 06:20
  • why do you need br's in the first place? – madalinivascu Sep 05 '16 at 06:25
  • @madalinivascu It's because of design – balex Sep 05 '16 at 06:26
  • @Ish Thanks for your refering, but this question is not very helpful because they don't have the problem with the
    's between the words     – balex Sep 05 '16 at 06:27
  • http://stackoverflow.com/questions/4184272/remove-all-br-from-a-string. Try this to remove the
    or any other tag from the string and then replace with span     – Ish Sep 05 '16 at 06:29
  • there you go -- https://jsfiddle.net/37bzjz5z/ -- you will have to find TE and XT if you know where the Breaks are --- https://jsfiddle.net/qyrf7hrp/ – Tasos Sep 05 '16 at 06:44

3 Answers3

1

No jQuery required. Although I did not test this at all so it might need tweaking.

var customReplace = function(str, subStr, color) {
    var words = str.split(' ');
    for (var i = words.length - 1; i >= 0; i--) {
        var word = words[i].replace(/<br>/g, '');
        if (word === subStr) {
            words[i] = '<span class="color-' + color + '">' + words[i] + '</span>';
        }
    }

    return words.join('');
}
Daniel Kobe
  • 9,376
  • 15
  • 62
  • 109
  • Wow, looks good. But how exactly can I use it? what is the str, and what is the subStr ? – balex Sep 05 '16 at 06:57
  • Woops just realized this can be a lot simpler – Daniel Kobe Sep 05 '16 at 07:00
  • subStr is the string you're trying to find and color. Str is the entire string e.g. `SOME TE
    XT IS HER
    E.` Just pass in the `innerHTML` for the str and set the `innerHtml` as the output of this function.     – Daniel Kobe Sep 05 '16 at 07:02
  • I tried this code `var textContent = $(".text-3-colors p").text(); alert(customReplace(textContent,"saf","red"));` But it gives me an error: cannot read property replace of undefiend – balex Sep 05 '16 at 07:07
  • So, now there's no error, but the subStr won't get colored red? – balex Sep 05 '16 at 07:15
  • did you create the css classes? If you have Inspect the html and make sure the classes are being added correctly – Daniel Kobe Sep 05 '16 at 07:36
0

I think a good Idea could be something like following:

  1. fine all text nodes and wrap them inside a span§
  2. re-insert all tags

var ALL_TAGS_REGEX = /(.+)(<{1}\/{0,1}.+>{1})/g;

document.addEventListener("DOMContentLoaded", function() {
  document.body.innerHTML = document
    .body
    .innerHTML
    .replace(ALL_TAGS_REGEX, '<span class="highlight">$1</span>$2')
  ;
});
.highlight { background: cyan; }
I am a string,<br>
<div> something else but no text node</div>
Other text nodes at libitum
Hitmands
  • 13,491
  • 4
  • 34
  • 69
-1

< br > tag is break in line, color won't be applicable on < br > text, this would not accounted as normal text while final html render

Shashi Pandey
  • 47
  • 3