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

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

Machine Learning — Supervised, Unsupervised, and Reinforcement — Explanation with Example

🤖 Let's take an example of machine learning and see how it can be performed in three different ways — Supervised, Unsupervised, and Reinforcement. We want a program to be able to identify apple in pictures Supervised Learning You will create or use a model that takes a set of pictures of apple and it analyses the commonality in those pictures. Now when you show a new picture to the program, it will identify whether it has an apple or not. It can also provide details on how confident is the program about it. Unsupervised Learning In this method, you create or use a model that goes through some images and tries to group them as per the commonalities it observes such as color, shape, size, partern, etc. And now you can go through the groups and inform the program what to call them. So, you can inform the program about the group that is apple mostly. Next time you show a picture, it can tell if an apple is there or not. Reinforcement Learning Here the model you create or...
Post a Comment
Read more

269. Alien Dictionary

  Solution This article assumes you already have some confidence with  graph algorithms , such as  breadth-first search  and  depth-first searching . If you're familiar with those, but not with  topological sort  (the topic tag for this problem), don't panic, as you should still be able to make sense of it. It is one of the many more advanced algorithms that keen programmers tend to "invent" themselves before realizing it's already a widely known and used algorithm. There are a couple of approaches to topological sort;  Kahn's Algorithm  and DFS. A few things to keep in mind: The letters  within a word  don't tell us anything about the relative order. For example, the presence of the word  kitten  in the list does  not  tell us that the letter  k  is before the letter  i . The input can contain words followed by their prefix, for example,  abcd  and then  ab . These cases will never ...
Post a Comment
Read more