Javascript Regular Expressions - jQuery highlightTextarea

Posted on 2014-08-22
Last Modified: 2014-08-23
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="" 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
Question by:Pedro Chagas
    LVL 107

    Expert Comment

    by:Ray Paseur
    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.
    LVL 3

    Author Comment

    by:Pedro Chagas
    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.

    LVL 107

    Assisted Solution

    by:Ray Paseur
    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
    LVL 34

    Assisted Solution

    by:Dan Craciun
    This will match both lines:
    <img src="the_image\.jpg".*?>|<div class="video-container".*?</div>

    Open in new window

    LVL 34

    Accepted Solution

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

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now