JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<div class="outer">
<button id="btn">top
</button>
  <div class="inner" >
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
  </ul>
  </div>
</div>

CSS

.outer {
  max-height: 100px;
}
.inner {
  border: 1px solid red;
  max-height: 50px;
  overflow: scroll;
}

JavaScript

$('#btn').mouseover(function() {
  $('.inner').scrollTop(0);
});

var txt = '{{<strong><em>user.user_name</strong><s>}}</s></em>';
var matches = txt.match(/\{\{(.*?)\}\}/g);
if (matches) {
  matches.forEach(function(i) {
    var oldi = i;
    let endTag = i.match(/<\/.*>/g);
    if (endTag) {
      endTag.forEach(function(j) {
        console.log(j);
        i = i.replace(j, '');
        alert('here' + i);
        i = i + j;
      })
    }
    let startTag = i.match(/<[^\/]*>/g);
    if (startTag) {
      startTag.forEach(function(j) {
        console.log(j);
        i = i.replace(j, '');
        alert('here22' + i);
        i = j + i;
      })

    }
    txt = txt.replace(oldi, i);
  })

}
alert('final:  ' + txt);