Search:
Tip: Please give your vote in at least one Picks Poll to enable search results. Thank you.
Search for phrase rather than keywords
(e.g. turn on to find exact phrase “Bella Thorne puffynip” rather than pages featuring “Bella”, “Thorne”, and “puffynip” within but not necessarily exact phrase).

Blog: Strip tags with Javascript

16th November 2014

Page: prev. | 1 | next

If, like me, you find you prefer to roll your own HTML markup then you may find occassion where you need to strip markup from text.

For sure, this is easy enough with server-side PHP’s strip_tags (php.net) function but there is no in-built client-side functionality with Javascript, but one is simple enough to implement.

Strip Tags


Allow tags:
Make lowercase Replace whitespace with hyphen (-)

Breakdown

Line
  1. <form>
  2.   <h1>Strip Tags</h1>
  3.   <textarea id="stringToStrip" rows="4" cols="45">Paste text here from which to strip HTML, XML, and PHP tags&hellip;</textarea>
  4.   <br />
  5.   Allow tags: <input id="allowed" type="text" value="<tagtype1><tagtype2>" />
  6.   <br />
  7.   <input id="lowercase" type="checkbox" value="lowercase" />Make lowercase <input id="replacewhitespace" type="checkbox" value="replacewhitespace" />Replace whitespace with hyphen (-)
  8.   <input type="button" value="Strip Tags" onclick="transformText();">
  9. </form>

The HTML form does not “submit” rather the input button just calls a defined Javascript function, transformText() to transform the textarea element’s content.

Line
  1. <script type="text/javascript">
  2.   function transformText() {
  3.     stringToStrip = document.getElementById('stringToStrip');
  4.     transformedText = stringToStrip.value;
  5.     lowercase = document.getElementById('lowercase');
  6.     if(lowercase.checked === true) {
  7.       transformedText = transformedText.toLowerCase();
  8.     }
  9.     if(replacewhitespace.checked === true) {
  10.       transformedText.trim(); //Remove whitespace from both sides of a string
  11.       transformedText = transformedText.replace(/ +(?= )/g,''); //Replace muliple spaces with a single space
  12.       transformedText = transformedText.replace(/\s/gi,'-'); //Replace whitespace with a hyphen (matches single white space character, including space, tab, form feed, line feed)
  13.     }
  14.     allowedTags = document.getElementById('allowed');
  15.     if(allowedTags.value != '<tagtype1><tagtype2>' || allowedTags.value != '') {
  16.       stringToStrip.value = strip_tags(transformedText,allowedTags.value);
  17.     }else {
  18.       stringToStrip.value = strip_tags(transformedText);
  19.     }
  20.   }
  21.   function strip_tags(input, allowed) {
  22.     /* Strips HTML tags from string. JS equiv. of php strip_tags.
  23.     Arguments:
  24.     input - string
  25.     allowed - tags to allow (e.g. <strong><em>)
  26.     */
  27.     allowed = (((allowed || '') + '')
  28.       .toLowerCase()
  29.       .match(/<[a-z][a-z0-9]*>/g) || [])
  30.       .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
  31.     var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
  32.       commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
  33.     return input.replace(commentsAndPhpTags, '')
  34.       .replace(tags, function($0, $1) {
  35.       return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
  36.       });
  37.   }
  38. </script>

The transformText() function converts the text to lowercase and replaces whitespace if checkboxes are set but relies on another defined function strip_tags(input, allowed) replicating the functionality of the PHP version to accomplish the removal of tags.

If you need use of such you can use online but with Javascript being a client-side script it’s simply enough to create a page with the a form and the script included to run run locally when the page is loaded.

Page: prev. | 1 | next

Tip: Please give your vote in a Poll to enable Tags search results. Thank you.