Search for styling cues within the text and transform them into distinct elements

Question

Search for styling cues within the text and transform them into distinct elements

I was inspired to develop a unique text editor that utilizes cues within the text, such as :strong:, to set formatting rules. Here is the code snippet I have so far:

<?php
    $document = $_GET["document"];
    $user = $_GET["user"];
    if ($user != nil) {
        $pass = $_GET["pass"];
    }
    $pass = $_GET["pass"];
    //$conn = mysqli_connect("localhost", "levimeredith", "levimorganx2");
?>

<html>
...

Despite my efforts, the implementation seems flawed as it does not function properly. Even after thorough inspection, no errors are being displayed in the console. Can you identify where I might be making an error?

javascript jquery html css

Answer 1

Answer №1

When dealing with an editable div, it is recommended to use $(..).html() instead of $(..).val().

You can simplify your string manipulation by using regular expressions:

$('.input').bind('input propertychange', function() {
    var inputString = $(".input").html();
    var newInputString= inputString.replace(
        /:strong:(.*?):strong:/g, '<strong>$1</strong>');
    if (newInputString !== inputString) {
        console.log(newInputString);    
        $(".input").html(newInputString);
    }
});

To ensure that the event handler is attached only after the document has fully loaded, consider moving your code outside the body tag and placing it within a $(function () { }); construct.

For a demonstration, check out this fiddle.

Answer 2

When dealing with an editable div, it is recommended to use $(..).html() instead of $(..).val().

You can simplify your string manipulation by using regular expressions:

$('.input').bind('input propertychange', function() {
    var inputString = $(".input").html();
    var newInputString= inputString.replace(
        /:strong:(.*?):strong:/g, '<strong>$1</strong>');
    if (newInputString !== inputString) {
        console.log(newInputString);    
        $(".input").html(newInputString);
    }
});

To ensure that the event handler is attached only after the document has fully loaded, consider moving your code outside the body tag and placing it within a $(function () { }); construct.

For a demonstration, check out this fiddle.

Search for styling cues within the text and transform them into distinct elements

Answer №1

Similar questions

How can I insert a zero value in front of single digit hours in Timepicker using Jquery?

The upload directory fails to include the folder name when sending a file

JQuery: the art of concealing and revealing

Having trouble with a Reactjs Facebook login library - update the componentClicked function to be async

Insert a new row at the top of the AngularJS table

Transmit data to a modal using JSX mapping technique

Contrast between employing element selector for concealment and activation tasks

Navigating sub-domains swiftly

Encountering an error with the message "SyntaxError: missing ; before statement" while attempting to utilize the Google Place Search

Managing various dropdown select options in pure JavaScript

Iterate through HTML content and utilize JavaScript along with Regular Expressions to substitute specific strings

Utilize the push method to form a new array

What methods are available to modify the colors in an Apex bar chart?

When working with JSON in Angular, the JSON pipe may display an empty string for values that are "undefined"

Display the users in the appropriate div using socket.io technology

Having trouble with Django's CSRF protection when using the jQuery validate plugin?

Using React to map through a nested array within an object

Utilize express.router() to send a get request to a third-party API while including an API key

Transferring a variety of PHP arrays to JavaScript upon successful AJAX completion

Removing gaps around rounded corners in jQuery UI accordions is a common issue that often arises when styling web elements