• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 757
  • Last Modified:

Javascript Regular Expressions - jQuery highlightTextarea

Hi E's, I'm developing a kind of html editor in a textarea (WYSIWYG), and adapted a plugin for highlight, this one: jQuery highlightTextArea, and I need help to create some regular expressions for javascript, like this: example from plugin website.
I can Insert two tags in my WYSIWYG, one for insert image, and other to insert youtube videos:
<img src="the_image.jpg" style="display: block; margin-left: 0px; margin-right: auto; padding: 15px 15px 15px 15px;" class="img-responsive" alt="the alt tag" width="640" height="480">

Open in new window

<div class="video-container"><iframe src="http://www.youtube.com/embed/m-ijfwr4SzI" frameborder="0" width="560" height="315"></iframe></div>

Open in new window

To get the tags highlight, I need a regular expression for highlight that two lines (image and video).
How I do that?

The best regards, JC
Pedro Chagas
Pedro Chagas
3 Solutions
Ray PaseurCommented:
Why not just use the industry standard that millions of WordPress web sites have already debugged for us?  Have a look at TinyMCE.  It's amazingly easy to use.  You can have it configured and running in minutes.
Pedro ChagasWebmasterAuthor Commented:
Thank you @Ray.
Before I begin the adventure of construct my own editor, I explore lots of alternatives, and none of these html editors served for my very specific needs, for this reason I had to do my own editor, and the editor in order to complete and proceed with my project, I just need to know a part of the regular expressions.
I confess I did not know TinyMCE, sure it will be an excellent alternative for future projects.

Ray PaseurCommented:
There are basically two center-of-gravity textarea editors, TinyMCE and CKEditor.  You may also want to explore BBCode and the lightweight MarkDown syntax.  I think you might want to start with either of TinyMCE or CKEditor and build your editor from their platform.  Both are free and open source.

I'm not sure about the regular expression, so I'll sign off now -- suggest you leave this open a while and perhaps another expert can come along to help with that part.

Best regards, ~Ray
Dan CraciunIT ConsultantCommented:
This will match both lines:
<img src="the_image\.jpg".*?>|<div class="video-container".*?</div>

Open in new window

Terry WoodsIT GuruCommented:
To allow for variable image names, I've adjusted Dan's pattern:
<img src="[^"]*".*?>|<div class="video-container".*?</div>

Open in new window


Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now