Change the colour of text as it is displayed with php

Question

At the moment I have a text area where people can insert their own sql scripts for people to see however it currently displays quite bland.

I was wondering if there was a way in which using Jquery/Javascript/PHP that when people load a note from the database, it then does a check through a list of words. For example "SELECT", "FROM", "WHERE", "INNER", "JOIN" and if they match it sets the colour of them to a defined colour?

This would need to happen when the note is displayed on the screen as the text is coming from a database. So maybe there is some way to check the words as they are pulled through from the database.

These notes are being pulled through as follows:

if (isset($_POST['noteid'])) 
{
    $showNoteInfo = "SELECT Note, NoteName FROM Notes WHERE NoteID = " . $_POST['noteid'];
    $stmt = sqlsrv_query($conn, $showNoteInfo);
}

if (isset($_POST['noteid'])) 
{
    if (empty($_POST['noteid'])) 
    {
        $notes = 'No Data';
    }
    if (sqlsrv_has_rows($stmt)) 
    {
        $data = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC);

        echo "<div class='custom-font title-container'>
                <div class='expand-button-container fa fa-expand' onclick='expandWindow()'></div>
                <div id='title-container1'><div class='edit-note fa fa-pencil' onclick='editGeneralNote()'>&nbsp;&nbsp;&nbsp;</div>" . "<div data-toggle='modal' data-target='#editNoteNameModal' class='display-inline'>" . $data['NoteName'] . "</div>" . "&nbsp;<div class='save-note fa fa-thumbs-up' onclick='saveGeneralNote(); submitNoteText();'></div></div>
              </div>";
        echo "<textarea spellcheck='false' readonly id='ta1'>" . $data['Note'] . "</textarea>";
    } 
    else 
    {
        echo "No data found";
    }
}

So how can I colour certain words pulled through from a database as they are displayed on screen?

If anyone could help I would appreciate it.

[`preg_replace()`](http://php.net/manual/en/function.preg-replace.php) — Pyromonk, Jun 01 '17 at 13:56
Oh, that looks promissing, i'll do some research and try and get it into my code as im still kind of new to PHP. Thanks for the answer — user7409253, Jun 01 '17 at 14:03

Jean-Charbel VANNIER · Answer 1 · 2017-06-01T14:35:40.683

Good old way :

//Your keywords to be highlighted
$keyWord = array("SELECT", "FROM", "WHERE");
//The string to stlylish
$str = "Select * From db";

foreach(explode(" ", $str) as $word)
{   
    if (in_array(strtoupper($word), $keyWord)) 
    {
        echo '<span class="color">' . $word . '</span>';
    }
}

If you prefer to get the result of the stylish process as a string and not a simple echo. You could use implode. It's the oposite of explode. You will just have to store the echo line in an array and implode the array after the loop.Resulting in somethink like this :

//Your keywords to be highlighted
$keyWord = array("SELECT", "FROM", "WHERE");
//The string to stlylish
$str = "Select * From db";
$result = array();

foreach(explode(" ", $str) as $word)
{   
    if (in_array(strtoupper($word), $keyWord)) 
    {
        array_push($result, '<span class="color">' . $word . '</span>');
    }
    else {
        array_push($result, $word);
    }
}

$str = implode($result, " ");
echo $str;

Might've been even more fun with `strpos` and `substr` ;) Thank you for providing a no-regexp alternative. — Pyromonk, Jun 01 '17 at 22:15

Pyromonk · Accepted Answer · 2017-06-01T14:35:07.337

1

I would do it with preg_replace():

$note = preg_replace('%(SELECT|FROM|WHERE)%m', '<span style="color: green;">$1</span>', $data['Note']);
echo $note;

$1 references the first capturing group. More information about regular expressions in PHP and regexp references can be found here.

How to use it in your scenario:

if (isset($_POST['noteid'])) 
{
    $showNoteInfo = "SELECT Note, NoteName FROM Notes WHERE NoteID = " . $_POST['noteid'];
    $stmt = sqlsrv_query($conn, $showNoteInfo);
}

if (isset($_POST['noteid'])) 
{
    if (empty($_POST['noteid'])) 
    {
        $notes = 'No Data';
    }
    if (sqlsrv_has_rows($stmt)) 
    {
        $data = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC);

        echo "<div class='custom-font title-container'>
                <div class='expand-button-container fa fa-expand' onclick='expandWindow()'></div>
                <div id='title-container1'><div class='edit-note fa fa-pencil' onclick='editGeneralNote()'>&nbsp;&nbsp;&nbsp;</div>" . "<div data-toggle='modal' data-target='#editNoteNameModal' class='display-inline'>" . $data['NoteName'] . "</div>" . "&nbsp;<div class='save-note fa fa-thumbs-up' onclick='saveGeneralNote(); submitNoteText();'></div></div>
              </div>";
        $note = preg_replace('%(SELECT|FROM|WHERE)%m', '<span style="color: green;">$1</span>', $data['Note']);
        echo "<textarea spellcheck='false' readonly id='ta1'>$note</textarea>";
    } 
    else 
    {
        echo "No data found";
    }
}

edited Jun 01 '17 at 14:35

answered Jun 01 '17 at 14:13

Pyromonk

684
1
12
27

Hi @Pyromonk its now throwing an undefined index error for Note on that preg_replace line. Thanks for teh answer btw – user7409253 Jun 01 '17 at 14:28
@user7409253, this line is meant to be used inside the `if(sqlsrv_has_rows($stmt))` block with subsequent `echo "$note";`. – Pyromonk Jun 01 '17 at 14:31
It is in that block at the moment :( – user7409253 Jun 01 '17 at 14:32
@user7409253, I've added a code snippet to show where I would place the code. I've tested it on my server beforehand, which is why I'm assuming you did something wrong when copypasting it. – Pyromonk Jun 01 '17 at 14:36
Hmm this is strange, ive moved it exactly the same as yours and it's still saying undefined index on that preg_replace line. https://gyazo.com/7fc5e3157b4c7a6e3b728ac890757939 this is the error "PHP Notice: Undefined index: Note in \\HP3-WINC1-SMB2.HOSTINGP3.LOCAL\DOMAINSY\230\456230\user\htdocs\sqlNoteContent.php on line 26" – user7409253 Jun 01 '17 at 14:40
What happens if you `echo data['Note']`? I've taken it straight out of your initial code, so I assumed that it was defined ...and I've only now realised that the result is being output to a `textarea`. If you want to have coloured words, you will have to change textarea to a different tag. Unless you need the contents to be editable, which is [a whole new problem](https://stackoverflow.com/questions/37139076/change-color-of-specific-words-in-textarea). – Pyromonk Jun 01 '17 at 14:46
1

I have got it working, i had two identical scripts only one uses Note one uses SQLNote, your code does what it should but the result is a bit different to what i thought would happen, the text isnt actually green but instead just displays this https://gyazo.com/d4b31c2780dde26a2515943de41d5f40 – user7409253 Jun 01 '17 at 14:48
1

Got it! I changed my textarea to a div and enabled `contenteditable="true"` then your preg_replace worked a treat, thank you so much – user7409253 Jun 01 '17 at 15:13
@user7409253, great! I'm glad I was able to help. My apologies for not responding sooner, I hope it was not too impolite of me. – Pyromonk Jun 01 '17 at 22:00

Change the colour of text as it is displayed with php

2 Answers2