3

I need to change RichEditor and TextEditor modes with JavaScript, now I need to convert Html to Text which is actually still in Html editor mode, so I need just p tags, but other Html can be stripped off.

Improve this question
2
  • @JavaCoder: Thinking about it again, there is one situation that would make the regex break. See edited answer, and decide if this would apply to you. Commented May 6, 2009 at 9:23
  • Tomalak's answer would work in most situations, but please keep in mind that stripping HTML down to "safe" HTML is extremely difficult and has serious security implications. If you're sending the resulting HTML to the server, never count on client-side validataion. Even if you don't send it back to the server, building it based on GET or POST values can make security holes. Read up on XSS and CSRF. Commented May 6, 2009 at 11:32

3 Answers 3

Reset to default
11

Regex replace (globally, case-insensitively):

</?(?:(?!p\b)[^>])*>

with the empty string.

Explanation:

<          # "<"
/?         # optional "/" 
(?:        # non-capture group
  (?!      #   negative look-ahead: a position not followed by...
    p\b    #     "p" and a word bounday
  )        #   end lock-ahead
  [^>]*    #   any char but ">", as often as possible
)          # end non-capture group
>          # ">"

This is one of the few situations where applying regex to HTML can actually work.

Some might object and say that the use of a literal "<" within an attribute value was actually not forbidden, and therefore would potentially break the above regex. They would be right.

The regex would break in this situation, replacing the underlined part:

<p class="foo" title="unusual < title">
                              ---------

If such a thing is possible with your input, then you might have to use a more advanced tool to do the job - a parser.

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

4 Comments

How can I make that to function ?
@JavaCoder: Is this a "give me teh codez" question? There are literally tons of JavaScript regex tutorials available on the internet. I am sure you manage to find one that tells you how to accomplish a replace, if only you went looking for one. Even Rafael's answer below shows you how to do it. But if you are asking how to make a JavaScript function, you might not yet be ready to use regular expressions at all. And your nickname would be wrong.
@Tomalak out of all the strip tag answers I have seen, I think you are the first to explain what each bit of code does which I am really greatful for cause I liek to know what code does when I use it...so thanks and +1 ;)
I modified it a bit to grab the whole tag, contents and closing </p>: </?(?:(?!p\b)[^>])*>.*</p>
3

This should help

var html = '<img src=""><p>content</p><span style="color: red">content</span>';
html.replace(/<(?!\s*\/?\s*p\b)[^>]*>/gi,'')

explanation for my regex:

replace all parts

  1. beginning with "<",
  2. not followed by (?!
    • any number of white-space characters "\s*"
    • optional "/" character
    • and tag name followed by a word boundary (here "p\b")
  3. containing any characters not equal ">" - [^>]*
  4. and ending with ">" character
Improve this answer

Comments

0 
var input = 'b<p on>b <p>good p</p> a<a>a h1<h1>h1 p<pre>p img<img src/>img';
var output = input.replace(/(<(?!\/?p\s*>)([^>]+)>)/ig, '');
console.log(output);
output: bb <p>good p</p> aa h1h1 pp imgimg
Improve this answer

Comments