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

Jquery – Using HTML in JavaScript

I was able to easily add text to my project using the following code:

const loadingText = $('#loading-text');
const text = "Your first sentence here"; // Your first sentence here

let i = 0;

const interval = setInterval(() => {
  if (i === text.length) {
    clearInterval(interval);
  } else {
    loadingText.text(loadingText.text() + text[i]);
    i++;
  }
}, 100); // Speed of animation (adjust as needed)
#loading-text {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin: 20px auto;
            width: 50%;
            opacity: 1;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="loading-text"></div>

Now the question that has come to me is, is there a way to display such text as HTML without tags (of course with the tag effect on the text)?

For example something like this:

const text = "lorem rerum <b style="color:#f00;">aperiam</b> maxime reiciendis";

In the text above, the word (aperiam) is placed between the tag and I have also given it a linear style.

By placing the above line in the text code, it is printed as follows:

lorem rerum <b style="color:#f00;">aperiam</b> maxime reiciendis

Is there a way to display the output as HTML?

Tags:

3

Answers


  1. 0

    You can’t add HTML one character at a time, since you need the

    Instead of a single string, make text an array of strings, so you can wrap tags around each character to add the style and color.

    This works for tags that just add character style, since you get the same result wrapping each character with the tag as wrapping the tag around the whole string. It won’t work for more complex HTML like links.

    const loadingText = $('#loading-text');
const text = ["l", "o", "r", "e", "m", " ", "r", "e", "r", "u", "m", " ",
  '<b style="color:#f00;">a</b>', '<b style="color:#f00;">p</b>', '<b style="color:#f00;">e</b>', '<b style="color:#f00;">r</b>', '<b style="color:#f00;">i</b>', '<b style="color:#f00;">a</b>', '<b style="color:#f00;">m</b>',
  " ", "m", "a", "x", "i", "m", "e", " ", "r", "e", "i", "c", "i", "e", "n", "d", "i", "s"
];

let i = 0;

const interval = setInterval(() => {
  if (i === text.length) {
    clearInterval(interval);
  } else {
    loadingText.html(loadingText.html() + text[i]);
    i++;
  }
}, 100); // Speed of animation (adjust as needed)
    #loading-text {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 20px auto;
  width: 50%;
  opacity: 1;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="loading-text"></div>
    Login or Signup to reply.
  2. 0

    As @Barmar said, you should use $().html() instead of .text(). But even so, you should invest a little more effort into the character incrementing. Currently I am spelling out each character of each html tag that I am inputting. Ideally each tag should be treated as a whole and should not even be counted as a character.

    So, the following can only be a rough starting point:

    const loadingText = $('#loading-text');
const text = 'Your first <b style="color:red">sentence</b> here'; // Your first sentence here

let i = 0;

const interval = setInterval(() => {
  if (i === text.length) {
    clearInterval(interval);
  } else {
    loadingText.html(text.slice(0,++i));
  }
}, 100); // Speed of animation (adjust as needed)
    #loading-text {
            font-size: 24px;
            text-align: center;
            margin: 20px auto;
            width: 50%;
            opacity: 1;
        }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="loading-text"></div>
    Login or Signup to reply.
  3. 0

    Try using $().html() instead of using .text() because we cant add one character at a time in HTML

    • UPVOTE PLEAsE
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search