-4

How to encode only html tags ^ < > "

Only encode html tags with .innerHTML

find html : & < > "

replace html : & < > &#34

       var Code = document.getElementsByTagName("code");
       var charsToReplace = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&#34;'
        };
      Code[0].innerHTML = ?????;


html input:
<code>

<code>
<div><div>
<script></script>
</code>

</code>

html output:
<code>

&lt;code&gt;
&lt;div&gt;&lt;div&gt;
&lt;script&gt;&lt;/script&gt;
&lt;/code&gt;

<code>
Ali Dbg
  • 63
  • 1
  • 2
  • 5

3 Answers3

0

Using String prototype

A possible solution is defining a replaceAll function, e.g. in the prototype of String:

String.prototype.replaceAll = function(search, replace) {
    return this.replace(new RegExp('[' + search + ']', 'g'), replace);
};

After this, you only need to iterate over the properties of charsToReplace:

for (var prop in charsToReplace) {
   if (charsToReplace.hasOwnProperty(prop)) {
       str = str.replaceAll(prop, charsToReplace[prop]));
   }
}

The final str can be assigned to the innerHTML.

Using normal function

If for some reason, you do not want to mess with the prototype, you may define a normal JavaScript function for the same task:

var replaceAll = function (str, search, replace) {
    return str.replace(new RegeExp('[' + search + ']', 'g'), replace);
}

This works really the same way, you just need to pass the string instance to it:

str = replaceAll(str, prop, charsToReplace[prop]));

Another approach

If you would use these methods often, you might consider storing the regex patterns in your charsToReplace object, like this:

var charsToReplace = {
    '&': {
        pattern: new RegExp('[' + '&' + ']', 'g'),
        replace: '&amp;'
    }
    ...
}

So your replaceAll function would look like this:

var replaceAll = function (str, replacement) {
    return str.replace(replacement.pattern, replacement.replace);
}

This way you would not need to recreate the regular expressions every time, which could save some processing time.

meskobalazs
  • 15,741
  • 2
  • 40
  • 63
0

How to encode only html tags ^ < > "

function encode(e) {
  return e.replace(/[\<\>\"\^]/g, function(e) {
 return "&#" + e.charCodeAt(0) + ";";
  });
}

test.value=encode('How to encode only html tags ^ < > "');
<textarea id=test rows=11 cols=55>www.WHAK.com</textarea>
Dave Brown
  • 923
  • 9
  • 6
-1

If you want to replace the actual innerHTML, which would include the contents of each tag, then you could simply use a chain of .replace(), as follows:

var HTML = document.getElementByTagName('code')[0];
HTML = HTML.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&gt;');

If you're doing this, be sure to replace & before any of the others, to avoid unintentional character replacements.

However, if you just want to replace the tags themselves, and not the content inside, this would be considerably more difficult. You'd need to create a blank element, e.g. DIV, put your innerHTML inside, and then work your way up from the deepest child element doing the above.

Hope that helps.

Sandeep
  • 65
  • 5