Replace substring but not if between tags or in tag with javascript

Question

So I have written this code here:

highlighter: function (item) {
    var parts = this.query.split(" ");
    var length = parts.length;
    for (var i = 0; i < length; i++){
        if(parts[i] != ""){
            item = item.replace(new RegExp('(' + parts[i] + ')', 'ig'), function ($1, match) {
                return '<strong>' + match + '</strong>'
            })
        }
    }

  return item;
}

What it does is:

I have the string item, and the string this.query
I split this.query at each space, and put the resulting substrings into parts[]

My goal is to make every occurrence of a substring from parts[] in item bold.

So if

item = "This is some text"

and

this.query = "This some"

I want This is some text.

This works perfectly, except when I get matches in the  element itself. So I want only the matches replaced that aren't in the strong tag itself. Because I get resulting strings with ong> or trong>in it. Is this possible?

Note that your first two lines can and should be combined into one: var parts = this.query.split(" "). There's no point constructing an array only to discard it immediately. — Eric
– Eric, Commented May 13, 2012 at 15:04
Yeah that seems quite obvious. Don't know why I didn't, thanks! — Anonymous
– Anonymous, Commented May 13, 2012 at 18:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

If you want to avoid the strong tags, do the replacement all in one step:

item = item.replace(
    new RegExp(parts.join('|'), 'ig'),
    function (match) {
        return '<strong>' + match + '</strong>'
    }
)

You'll still have a problem if "item" contains strong before you begin, but otherwise you won't have a problem.

Edit:

Let's say you want to match "this", "that" and, "the other". A regular expression, or RegExp for that is This|some|the other. Oddly enough, the string passed to new RegExp is parsed as a regular exrpession.

The other important thing to note is that item.replace(regex, callback) will replace every match it finds with the result of calling callback(match, ...) for each one. The first argument passed to callback is the entire match of the regex, while the remaining arguments are the groups within the match.

If you want to know more, read up on regular expressions.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 13, 2012 at 15:06

Eric

98.1k54 gold badges257 silver badges389 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Anonymous Over a year ago

Works like a charm! Could you explain your answer a bit? It places a | between all the substrings which results in replacing them with their strong equivalent, but what does the | actually mean? and what are the parameters (_,match)? I think _ is probably a wildcard. But why does it need to be a wildcard. And why does it give all the matches to match.

Eric Over a year ago

_ has no special meaning. It's an argument name typically used for arguments that aren't used.

PointedEars Over a year ago

@gl3nn This works reliably only if there are not already tags in item and if the words to be highlighted do not contain RegExp-special characters. For all other cases, see my solution.

Anonymous Over a year ago

Since the items will just be names this solution works fine. From the moment I have enough reputation I will vote both answers up.

Anonymous Over a year ago

Another problem. é. if eac is used as query string, eac becomes strong, and $eacute; doesn't become é anymore. And also i can't use é to search on é. And i can't find htmlentities encode and decode for javascript...

|

PointedEars · Accepted Answer · 2012-05-13 17:01:50Z

Because in these languages there is no native negative lookbehind, if you want to ignore tags when replacing, you need to match them and replace them with themselves, like so:

item = item.replace(
  new RegExp(
    "(<\\/?\\w+(\\s+\\w+(\\s*=\\s*(\"[^\"]*\"|'[^']*'|\\S+))?)*>)"
      + "|(" + parts.join("|") + ")",
    "ig"),
  function (match, tag, p2, p3, attributeValue, matchedText) {
    if (tag)
    {
      return tag;
    }

    return "<strong>" + matchedText + "<\/strong>";
  });

(no loop necessary)

Be aware that \w+ is only an approximation for the characters that are allowed in an element type name or attribute name, and that \s is only an approximation for markup white-space.

You might also have to escape your search words if you use them as string arguments to the RegExp constructor. For that and if you are confused by the number of necessary escape sequences here, see JSX:regexp.js, where the String.prototype.regExpEscape() and RegExp.prototype.concat() methods should come in handy, respectively.

jfriend00 · Accepted Answer · 2012-05-13 15:02:23Z

0

To search only outside the tags, you need a parser that can filter out all the HTML tags and present you with only pieces of text between tags that you can search. I don't know how your particular application works, but often the best place to get a parser is to let the browser parse the HTML for you and do searches only on the resulting textnodes that it has between the tags.

answered May 13, 2012 at 15:02

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

1 Comment

Anonymous Over a year ago

I'm updating my question with an extra question.

Anonymous · Accepted Answer · 2012-05-15 00:12:33Z

0

The solution I used ! :

highlighter: function (item) {
    var parts = this.query.replace(/\s+/g, " ").replace(/^\s|\s$/g,"").split(/\s/);
    if( item.match(/(?:&[^;]*;)+/) != null){
        item = strip(item);
    }
    item = item.replace(
        new RegExp('(' + parts.join('|') + ')', 'ig'),
        function (_, match) {
            return '<strong>' + match + '</strong>'
        }
    )
    return item;
}

This is what I turned the function into. The first line is to get rid of spaces at the end and of sequence of spaces. This was needed to do a correct split, else the highlighter would highlight all the spaces. ( Which you could only see if you watched the HTML). Next I check if any special characters were in the item. If so i strip them using this function :

function strip(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent||tmp.innerText;
}

Then I do the replacing part, where I used the code of Eric.

Thanks a lot! I also got to know regex a bit better!

answered May 15, 2012 at 0:12

Anonymous

5723 silver badges16 bronze badges

2 Comments

PointedEars Over a year ago

Good thinking about innerHTML, but remember that it is still a proprietary property, error-prone, and that re-parsing is rather inefficient when compared to using existing text node values directly. I have made some performance optimizations, though.

Anonymous Over a year ago

What kind of optimizations ? Feel free to enlighten me :D

Collectives™ on Stack Overflow

Replace substring but not if between tags or in tag with javascript

4 Answers 4

Edit:

7 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Edit:

7 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related