CODEWITHSUNDEEP
javascriptjquery
Jack jdeoel
Jack jdeoel

Reputation: 4584

How can I change * to italic by javascript?

I am trying to change(display) * to italic style from user input textarea when button is clicked. But there is nothing working without error , I think my logic is a little wrong but can't figure anymore !!!

var italic = 0;
$("#btn").click(function(){
        var val = $("#usr").val();
        val.split("").forEach(function(v,i){
            var sts = /\*/g.test(v);
            if(sts){
                if(italic == 1){
                val.substr(0, i) + '</i>' + val.substr(i + 1);
                italic = 0;
                }
                else{
                val.substr(0, i) + '<i>' + val.substr(i + 1);
                italic++;
                }
            }
        });    
        $("#display").html(val);
});
#display {
    background: #aaa;
    width: 30%;
    height: auto;
    border: 1px solid #ded;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea id="usr"></textarea>
<button id="btn">Insert</button>
<div id="display"></div>

Upvotes: 3

Views: 109

Answers (3)

Justinas
Justinas

Reputation: 43451

Use simple \*(.*?)\* to wrap output in <i> tag:

$(document).ready(function() {
  $('textarea').keyup(function() {
    $('#output').html($(this).val().replace(/\*(.*?)\*/g, '<i>$1</i>'));
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div id="output"></div>

RegEx explained:

\* - literal * (* in RegEx means any character)
.*? - any character
() - capturing group that later can be used with $1, $2... ((.*?) - capture any character)
/ - RegEx delimiters (can be any character

\*(.*?)\* - match character *, than any character up till you find *

Upvotes: 5

wonyeouuu
wonyeouuu

Reputation: 189

var italic = 0;
$("#btn").click(function(){
        var val = $("#usr").val();
        val = val.replace(/\*/g, '<i>*</i>');
        $("#display").html(val);
});
#display {
    background: #aaa;
    width: 30%;
    height: auto;
    border: 1px solid #ded;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea id="usr"></textarea>
<button id="btn">Insert</button>
<div id="display"></div>

You can just use javascript replace function, its first argument can accept regex. Back slash (\) is for escaping (since * in regex has different meaning than just a *), and g stands for 'global'.

Upvotes: -1

Zay Lau
Zay Lau

Reputation: 1864

Since you are doing val.split(""), the .each loop is looping each character and it is not necessary to use RegExp to test the value, you could simply apply v == "*"

I would also change the data member name from italic to italicTagOpened and control the state of it by italicTagOpened = !italicTagOpened;

As per the above said, you are looping through each character, I would also have a data member output to append the result

Here is my revised function

var italicTagOpened = false;
$("#btn").click(function(){
  var val = $("#usr").val(),
      output = "";

  val.split("").forEach(function(v,i) {
    //var sts = /\*/g.test(v);
    if(v == "*"){
      if(italicTagOpened) output += "</i>";
      else output += "<i>";

      italicTagOpened = !italicTagOpened;
    } else output += v;
  });    
  $("#display").html(output);
});

You could try it on https://jsfiddle.net/uyjqerg4/1/

Upvotes: 1

Related Questions