RegEx question - HTML tag content

Question

I want to replace all "i" character in <body> with "I" by JavaScript. (for example: <div id="123">Hi! it!</div> should change to <div id="123">HI! It!</div>). I know I must use regular expressions. but I don't know what I should write. Can you help me? Thanks ..

Because I want to replace "i" with "I", only in contents and not in tags ... — mrdaliri, Dec 20 '10 at 13:13
If it's HTML/XML, don't use regular expressions. [Historic archives](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) of Stackoverflow will tell you why. — darioo, Dec 20 '10 at 13:15
Come on, people. Closing this as a duplicate is plain wrong. How is it even similar? — Kobi, Dec 20 '10 at 13:21

score 3 · Accepted Answer · edited May 23 '17 at 09:58

3

I just answered a similar question which may help you: JQuery/Javascript - Search DOM for text and insert HTML

For this particular case, you can simplify.

UPDATE

I've added a filter parameter to allow you to filter out descendants of particular nodes. This should be a function that takes a single DOM node parameter and returns a Boolean: true to replace text within the node and its descendants and false to ignore the node and its descendants.

function replaceText(node, regex, replacementText, filter) {
    if (node.nodeType == 3) {
        node.data = node.data.replace(regex, replacementText);
    } else if (!filter || filter(node)) {
        var child = node.firstChild;
        while (child) {
            replaceText(child, regex, replacementText, filter);
            child = child.nextSibling;
        }
    }
}

function scriptAndStyleFilter(node) {
    return node.nodeType != 1 || !/SCRIPT|STYLE/i.test(node.nodeName);
}

replaceText(document.body, /i/g, "I", scriptAndStyleFilter);

edited May 23 '17 at 09:58

Community

1
1

answered Dec 20 '10 at 13:08

Tim Down

318,141
75
454
536

Thanks ... your function is great! but how can filter – mrdaliri Dec 21 '10 at 15:37
@kikio: What exactly is the problem with it? By the way, ` – Tim Down Dec 21 '10 at 19:01
I wrote on that page: `Hi! it!` I want it changed to this: `HI! It!` (all of – mrdaliri Dec 21 '10 at 19:10
Right... and that's what happens. – Tim Down Dec 22 '10 at 01:00
(with your new code): `HI! It!` – mrdaliri Dec 22 '10 at 15:28
@kikio: Humble apologies, you're absolutely right. I've edited my answer to fix the problem. – Tim Down Dec 22 '10 at 18:31
Thanks .. your new new code works perfectly! but another question, can I works with ASCII code of character instead – mrdaliri Dec 23 '10 at 13:31
(I'm sorry, my previous comment is not complete. so I write it again:) Thanks .. your new new code works perfectly! but another question, can I works with ASCII code of character instead of normal character mode? for example, use "73" instead of "I". or "106" instead of "i". – mrdaliri Dec 23 '10 at 13:42
You could use Unicode escape seuqences. The following is equivalent to the last line of my answer: `replaceText(document.body, /\u0069/g, "\u0049", scriptAndStyleFilter);`. Or you could build strings using `String.fromCharCode()`. For example, `String.fromCharCode(102, 111, 111)` returns "foo". – Tim Down Dec 23 '10 at 14:37
Yes!!! Thanks!! Thank you very much! I know you're a big man in JavaScript! (unfortunately, I don't have many knowledge in JavaScript. Can you give me a code, with ASCII replacing (uses String.fromCharCode? I tried this code, but it only replaced first "i": `replaceText(document.body, String.fromCharCode(106), String.fromCharCode(102, 111, 111), scriptAndStyleFilter);` thank you very very very much.) – mrdaliri Dec 23 '10 at 15:18
The second parameter was a regular expression literal, and you've replaced it with a string, which changes the functionality. However, there is also a `RegExp` constructor which takes a string pattern: `replaceText(document.body, new RegExp(String.fromCharCode(106), "g"), String.fromCharCode(102, 111, 111), scriptAndStyleFilter);` – Tim Down Dec 23 '10 at 15:44

score 1 · Answer 2 · answered Dec 20 '10 at 13:11

1

Here's an alternative, using CSS, jQuery and a Highlight plugin:

CSS:

.highlight {text-transform:uppercase;}

JavaScript:

$('body').highlight('i');

Working example: http://jsbin.com/okavo4

This is a quick example, but you can use the source code to get what you want, in case you need something more complex. Using a regular expression on the source of your body is wrong, specially in context of a browser, where you already have a parsed DOM structure.

answered Dec 20 '10 at 13:11

Kobi

135,331
41
252
292

1

@kikio - I did just that, and in just a few minutes. The plugin allows you to exclude certain elements, if that is what you need. A regex here would be difficult or down right impossible. – Kobi Dec 20 '10 at 13:16

RegEx question - HTML tag content

2 Answers2