Question 35745 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

wrap shortcode with square brackets – Jquery

My shortcode function work with or without square brackets. But i want, it only work with square brackets.

shortcode (I don’t want)

itemText num="1" title="This is a title"

shortcode (I want)

[itemText num="1" title="This is a title"]

Here is my code

function shortCode(a, b, c) {
    var split = a.split(" "),
        regex = /(?<=")w.*?(?=")/g;
    for (var i = 0; i < split.length; i++) {
        var pair = split[i].split("=");
        if (pair[0].trim() == b) {
            c = pair[1];
            if (c.match(regex) != null) {
                return String(c.match(regex)).trim()
            } else {
                return false
            }
        }
    }
    return false
}

Example

function shortCode(a, b, c) {
    var split = a.split(" "),
        regex = /(?<=")w.*?(?=")/g;
    for (var i = 0; i < split.length; i++) {
        var pair = split[i].split("=");
        if (pair[0].trim() == b) {
            c = pair[1];
            if (c.match(regex) != null) {
                return String(c.match(regex)).trim()
            } else {
                return false
            }
        }
    }
    return false
}

$(".test span").each(function () {
    var $this = $(this),
        text = $this.html(),
        mtc = text.toLowerCase(),
        num = shortCode(text, "num"),
        title = shortCode(text, "title");
    if (mtc.match("itemtext")) {
       $this.text(num + " " + title); //expected output: 1 This is a title
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
    <span>itemText num="1" title="This is a title"</span>
</div>
Tags:

2

Answers


  1. 0

    I’d suggest using a modern framework such as React, or even AngularJS will do for your case.
    Alternatively, I’d suggest using mature templating solutions, like Mustache.
    Or to put all the data like so: <span data-title="my title" />, etc.
    It’ll be a nightmare to invent and maintain your custom solution, a lot of regular expressions to parse, to consider edge cases, like spaces or special characters in titles, etc.

    But it’s holidays time, so here’s a code that you asked for:

    function shortCode(a, b, c) {
    if (!a.startsWith("[") || !a.endsWith("]")) return;
    a = a.substring(1, a.length - 1);
    var split = a.split(" "),
        regex = /(?<=")w.*?(?=")/g;
    for (var i = 0; i < split.length; i++) {
        var pair = split[i].split("=");
        if (pair[0].trim() == b) {
            c = pair[1];
            if (c.match(regex) != null) {
                return String(c.match(regex)).trim()
            } else {
                return false
            }
        }
    }
    return false
}

$(".test span").each(function () {
    var $this = $(this),
        text = $this.html(),
        mtc = text.toLowerCase(),
        num = shortCode(text, "num"),
        title = shortCode(text, "title");
    if (mtc.match("itemtext")) {
       if (num && title) {
         $this.text(num + " " + title); //expected output: 1This is a title
       }
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
    <span>[itemText num="1" title="This"]</span><br>
    <span>itemText num="2" title="That"</span>
</div>
    Login or Signup to reply.
  2. 0

    Here is a shorted code that changes the span only if its content is enclosed in square brackets. The code of the shortCode() function is also shortened.

    function shortCode(str, attr) {
    let regex = new RegExp('\b' + attr + '="([^"]*)');
    let m = str.match(regex) || [ null ];
    return  m[1];
}

$(".test span").each(function () {
    let $this = $(this);
    let text = $this.html();
    let mtc = text.toLowerCase()
    if (mtc.match(/^[itemtext .*]$/)) {
        let num = shortCode(text, "num");
        let title = shortCode(text, "title");
        $this.text(num + " " + title); //expected output: 1 This
    }
});
    span {
  display: block;
  border: 1px solid gray;
  padding: 3px 10px;
  margin: 3px 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
    <span>[itemText num="1" title="This is a title"]</span>
    <span>itemText num="1" title="This is a title"</span>
</div>

    Explanation of the regex in shortCode():

    • \b — word boundary to avoid false positives for attributes
    • + attr + — attribute
    • =" — literal =" text
    • ([^"]*) — capture group 1: everything up to and excluding "

    Explanation of ^[itemtext .*]$ regex:

    • ^ — anchor at start of string
    • [ — expect [
    • itemtext — literal text (includes trailing space)
    • .* — greedy scan
    • ] — expect ]
    • $ — anchor at end of string
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search