Replace with RegEx and JavaScript

Question

I am attempting to do a quick replace of the 'innerHTML' of the 'code' element. I thought this may work:

function codeDisplay ( ) {
    var code = document.getElementsByTagName('code').innerHTML;

    var codeExam1 = new RegExp('<', 'gm');
    var codeExam2 = new RegExp('>', 'gm');

    code.replace(codeExam1, '&lt;');
    code.replace(codeExam2, '&gt;');
      }

Do I need to perform any additional steps to push the information back to the browser or conversion of data types maybe? Or am I completely wrong in how 'RegEx' and 'innerHTML' work? I appreciate the feedback in advance.

Am I missing something or is regex for this like using a sledgehammer on a finish nail? — Brad Christie
– Brad Christie, Commented Mar 23, 2012 at 18:08
You probably want to write code = code.replace(/&/g, '&') as well -- even before the < and > steps. — ruakh
– ruakh, Commented Mar 23, 2012 at 18:11
@BradChristie - How else would you do it? String replacement only finds the very first one. Do you really think code.split('>').join('>') is any better? — Joseph Silber
– Joseph Silber, Commented Mar 23, 2012 at 18:14

ZER0 · Accepted Answer · 2012-03-23 18:39:53Z

2

So, first fo all:

var code = document.getElementsByTagName('code').innerHTML;

document.getElementsByTagName returns a list of elements not just one. So, if your purpose is escaping all the code tags you have in the page, you need to iterate them. Second, I believe you can avoid regexp just using textContent (where supported) or innerText.

var codes = document.getElementsByTagName("code");

for (var i = 0, code; code = codes[i++];) {
    if ("textContent" in code)
        code.textContent = code.innerHTML;
    else if ("innerText" in code)
        code.innerText = code.innerHTML;
}

or create a new text node:

var codes = document.getElementsByTagName("code");

for (var i = 0, code, html; code = codes[i++];) {
    html = code.innerHTML;

    code.innerHTML = "";

    code.appendChild(document.createTextNode(html));
}

That's should escape every html entities. If you still want to use the regexp, maybe as fallback, you can have this kind of function:

var escapeEntities = (function(){
    var entities = {"<" : "lt", ">" : "gt", "&" : "amp" };
    var re = new RegExp("[" + Object.keys(entities).join("") + "]", "g");

    function replaceEntities(match) {
        return match in entities ? "&" + entities[match] + ";" : match;
    }

    return function(value) {
        return value.replace(re, replaceEntities);
    }
})()

And then in your code:

code.innerHTML = escapeEntities(code.innerHTML);

Note that if Object.keys is not supported you can easily use a shims (as indicated in the link); or simply replace manually the list of entities you support:

 var entities = {"<" : "lt", ">" : "gt", "&" : "amp" };
 var re = /[<>&]/g;

In that case you need to remember to add in both entities and re variables a new entity you want to support in the future; Object.keys just help you in maintenance.

answered Mar 23, 2012 at 18:39

ZER0

25.5k5 gold badges53 silver badges57 bronze badges

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

3 Comments

ZER0 Over a year ago

You can style the whole block with CSS. So you can have: code { background: silver; border: 1px solid gray } etc.

Brandon Clark Over a year ago

Let me ask you this. If I convert to text can I still style it with css?

Brandon Clark Over a year ago

I think I may try that then. Thank you very much for the in depth explanation

Engineer · Accepted Answer · 2012-03-23 18:56:54Z

1

Use assignment:

code = code.replace(codeExam1, '&lt;');
code = code.replace(codeExam2, '&gt;');

And modify your code like this:

function codeDisplay ( ) {
    var codeArray = document.getElementsByTagName('code');
    var codeExam1 = new RegExp('<', 'gm');
    var codeExam2 = new RegExp('>', 'gm');

    for ( var i = 0 ; i < codeArray.length ; ++i ){
        var code = codeArray[i].innerHTML;
        code.replace(codeExam1, '&lt;');
        code.replace(codeExam2, '&gt;');
        codeArray[i].innerHTML = code; 
    }
}

edited Mar 23, 2012 at 18:56

answered Mar 23, 2012 at 18:07

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

3 Comments

Brandon Clark Over a year ago

I tried doing this by loading it in the body onLoad attribute but it still does not work.

Engineer Over a year ago

I think the problem is that'document.getElementsByTagName('code')' returns array,so you need to use document.getElementsByTagName('code')[0] instead.

Engineer Over a year ago

Or if you have multiple 'code' element , use loop to replace contents of all those elements.

Sirko · Accepted Answer · 2012-03-23 18:08:59Z

Replace returns a new string containing the result. See MDN for example. To actually replace the contents of code you code has to look like this:

function codeDisplay ( ) {
  var code = document.getElementsByTagName('code').innerHTML;

  var codeExam1 = new RegExp('<', 'gm');
  var codeExam2 = new RegExp('>', 'gm');

  code = code.replace( codeExam1, '&lt;');
  code = code.replace(codeExam2, '&gt;');

  document.getElementsByTagName('code').innerHTML = code;
}

Or a shorter version (could be even shorter, but in my opinion just at the cost of readability):

function codeDisplay ( ) {
  var code = document.getElementsByTagName('code').innerHTML;

  code = code.replace( /</gm , '&lt;' )
             .replace( />/gm, '&gt;' );

  document.getElementsByTagName('code').innerHTML = code;
}

leoinfo · Accepted Answer · 2012-03-23 18:14:03Z

0

Try this:

function codeDisplay ( ) {
  var s = document.getElementsByTagName('code').innerHTML;
  s = s.replace(/\</g,'&lt;');
  s = s.replace(/\>/g,'&gt;');
  document.getElementsByTagName('code').innerHTML = s;
}

answered Mar 23, 2012 at 18:14

leoinfo

8,2558 gold badges40 silver badges49 bronze badges

Collectives™ on Stack Overflow

Replace with RegEx and JavaScript

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related