Skip to main content

Creating your own markup language and converting to html

I have this Sentence " Hi ~r~ I'm the ~b~ BOSS "
I want to change string after "~r~" by putting it in a span with red color, and string after " ~b~ " by putting it in a span with black color. This example has just 2 colors but I may want to have many more colors with other codes I want the output string to look something like the following:
"Hi" + "<span style='color: red;'>i'm the</span>" + "<span style='color: black;'>BOSS</span>"

Answer 1

function addColors(ele) {
  let str = ele;
  let hasSpan = false;
  let ansStr = "";
  for(let i=0; i<str.length; i++) {
    if(str[i] === '~') {
      i++;
      switch(str[i]) {
        case 'r':
          if(hasSpan) {
            ansStr = str.slice(0, i-1) + "<span><span style='color: red;'>" + str.slice(i+2);
          } else {
            ansStr = str.slice(0, i-1) + "<span style='color: red;'>" + str.slice(i+2);
            hasSpan = true;
          }
          str = ansStr;
          i = i+2;
          break;
        case 'b':
          if(hasSpan) {
            ansStr = str.slice(0, i-1) + "<span><span style='color: black;'>" + str.slice(i+2);
          } else {
            ansStr = str.slice(0, i-1) + "<span style='color: black;'>" + str.slice(i+2);
            hasSpan = true;
          }
          str = ansStr;
          i = i+2;
          break;
        default:
          console.log(i, str[i+1], "DEFAULT")
      }
    }
  }
  if(hasSpan) {
    str = str + "</span>"
  }
  document.querySelector('h1').innerHTML = str;
}
<h1>WATCH THIS!</h1>
<input type="text" name="jhtml" value="Hi ~r~ I'm the ~b~ BOSS">
<button onclick="addColors(document.getElementsByName('jhtml')[0].value)">Add Colors</button>
Run the code here: https://stackoverflow.com/questions/58669422/how-to-change-a-part-of-sentence-after-specific-string-in-javascript/58669900#58669900

Answer 2: Regex

let text = " Hi ~r~ I'm the ~b~ BOSS "
let colors = { r: 'red', b: 'blue' }
document.h1.innerHTML = text.replace(/~([a-z])~(.*?)(?=~|$)/g, (match, p1, p2) => {
  return `<span style="color:${colors[p1]}">${p2}</span>`
})

Comments

Post a Comment

Popular posts from this blog

Python - List - Append, Count, Extend, Index, Insert, Pop, Remove, Reverse, Sort

🐍 Advance List List is widely used and it's functionalities are heavily useful. Append Adds one element at the end of the list. Syntax list1.append(value) Input l1 = [1, 2, 3] l1.append(4) l1 Output [1, 2, 3, 4] append can be used to add any datatype in a list. It can even add list inside list. Caution: Append does not return anything. It just appends the list. Count .count(value) counts the number of occurrences of an element in the list. Syntax list1.count(value) Input l1 = [1, 2, 3, 4, 3] l1.count(3) Output 2 It returns 0 if the value is not found in the list. Extend .count(value) counts the number of occurrences of an element in the list. Syntax list1.extend(list) Input l1 = [1, 2, 3] l1.extend([4, 5]) Output [1, 2, 3, 4, 5] If we use append, entire list will be added to the first list like one element. Extend, i nstead of considering a list as one element, it joins the two lists one after other. Append works in the following way. Input l1 = [1, 2, 3] l1.append([4, 5]) Output...
Post a Comment
Read more

Difference between .exec() and .execPopulate() in Mongoose?

Here I answer what is the difference between .exec() and .execPopulate() in Mongoose? .exec() is used with a query while .execPopulate() is used with a document Syntax for .exec() is as follows: Model.query() . populate ( 'field' ) . exec () // returns promise . then ( function ( document ) { console . log ( document ); }); Syntax for .execPopulate() is as follows: fetchedDocument . populate ( 'field' ) . execPopulate () // returns promise . then ( function ( document ) { console . log ( document ); }); When working with individual document use .execPopulate(), for model query use .exec(). Both returns a promise. One can do without .exec() or .execPopulate() but then has to pass a callback in populate.
1 comment
Read more

Python Class to Calculate Distance and Slope of a Line with Coordinates as Input

🐍  Can be run on Jupyter Notebook #CLASS DESIGNED TO CREATE OBJECTS THAT TAKES COORDINATES AND CALCULATES DISTANCE AND SLOPE class Line:     def __init__(self,coor1,coor2):         self.coor1=coor1         self.coor2=coor2 #FUNCTION CALCULATES DISTANCE     def distance(self):         return ((self.coor2[0]-self.coor1[0])**2+(self.coor2[1]-self.coor1[1])**2)**0.5 #FUNCTION CALCULATES SLOPE         def slope(self):         return (self.coor2[1]-self.coor1[1])/(self.coor2[0]-self.coor1[0]) #DEFINING COORDINATES coordinate1 = (3,2) coordinate2 = (8,10) #CREATING OBJECT OF LINE CLASS li = Line(coordinate1,coordinate2) #CALLING DISTANCE FUNCTION li.distance() #CALLING SLOPE FUNCTION li.slope()
Post a Comment
Read more