How to replace text containing string with a HTML tag?

Question

I am trying to work out how to replace any instance of text on page matching a certain phrase with a HTML tag - the contents should remain the same.

bold("Hello")

The code above should be replaced with:

<b>Hello</b>

Here is the code that I am currently using:

node.data = node.data.replace('bold("','<b>');
node.data = node.data.replace('")','</b>');

The problem with this is that rather than creating a <b> tag, it converts the < and > into their HTML entities - < >.

Also, it seems unpractical to replace all instances of ") with </b>.

What would be the best way to achieve this.

I would appreciate any help with this, thank you!

Or maybe this helps you: http://locutus.io/php/strings/htmlentities/ — z3nth10n, Sep 02 '17 at 23:30
Go read pretty much any beginners guide to javascript if you want to learn. — Alex McMillan, Sep 02 '17 at 23:43
Possible duplicate of [Creating a new DOM element from an HTML string using built-in DOM methods or prototype](https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro) — Alex McMillan, Sep 02 '17 at 23:45

score 7 · Accepted Answer · answered Sep 02 '17 at 23:52

I assume you don't literally mean all text on a page, but rather all text inside of a given element. DucFilans is right on the money with regex, I'll slightly modify his answer to provide a complete working solution:

var parserRules = [
  { pattern: /bold\("(.*?)"\)/g, replacement: '<b>$1</b>' },
  { pattern: /italics\("(.*?)"\)/g, replacement: '<i>$1</i>' }
];

document.querySelectorAll('.parse').forEach(function(tag) {
  var inner = tag.innerHTML;
  parserRules.forEach(function(rule) {
    inner = inner.replace(rule.pattern, rule.replacement)
  });
  tag.innerHTML = inner;
});

<div class='parse'>
  <div>bold("Hello") world <p> Rose italics("pink") slow bold("!") </p> </div>
  <div>bold("astiago") cheeeeeeese!</div>
</div>

You can define the regex patterns and replacement rules in the parserRules array, and then any element marked with the 'parse' class will be parsed. One warning is that this will replace all of the subelements, so if you are relying on listeners attached to subelements or something similar you'll need to take care of that as well.

score 1 · Answer 2 · answered Sep 02 '17 at 23:36

1

Regex helps in your concern of replacement.

var str   = 'bold("Hello")';
var regex = /bold\("(.*?)"\)/;
str = str.replace(regex, "<b>$1</b>");

console.log(str);

answered Sep 02 '17 at 23:36

Duc Filan

6,769
3
21
26

How to replace text containing string with a HTML tag?

2 Answers2

Linked