时间戳

首页 > 解决方案 > 我需要使用替换功能使我的字符串的某些部分变为粗体

javascript - 我需要使用替换功能使我的字符串的某些部分变为粗体

问题描述

我需要使用替换功能使我的字符串的某些部分变为粗体。“b”和“strong”标签在字符串中不起作用，因为标签的“<”部分会在输出中显示几毫秒，这是非常不专业的。我无法应用此功能

boldString(str, substr) {
  var strRegExp = new RegExp(substr, 'g');
  return str.replace(strRegExp, '<b>'+substr+'</b>');
}

我认为它可能有效，或者请给我一些替代解决方案。谢谢

function startTyping(){

  var bt = document.getElementById("typBt");
    bt.style.display = "none";

  for (let i = 0; i < 10; i++) {
    task(i);
  }
}

function task(i) {
  setTimeout(function() {
    // Add tasks to do 
    var typeString = ['\u2022 A quick brown fox \r  jumps over the lazy dog. \u2714\uFE0F\n\n\u2022 A quick brown fox \r  jumps over the lazy dog. \u2714\uFE0F\n\n\u2022 A quick broum fox \r  jumnps over the lazy dog. \u2714\uFE0F\n\n\u2022 A quick brown fox \r  jumps over the lazy dog. \u2714\uFE0F\n\n\u2022 A quick brown fox \r  jumps over the lazy dog. \u2714\uFE0F'];

    var i = 0;
    var count = 0;
    var selectedText = '';
    var text = '';
    var typing = document.getElementById('typing');

    (function type() {
      if (count == typeString.length) {
        count = 0;
      };

      selectedText = typeString[count];
      text = selectedText.slice(0, ++i);
      typing.innerHTML = text.fontsize(3);
      typing.style.fontFamily = "helveticanew";
      typing.style.color = "black";
      typing.style.fontWeight = "normal";
      typing.style.lineHeight = "1"; //Difference between different lines  
      typing.style.textAlign = "left";
      typing.style.margin = "25px";

      if (text.length === selectedText.length) {
        count++;
        i = 0;
      }

      /* SOLUTION : wait two seconds when new line */
      if (typeString[0][i - 1] == '\n') {
        setTimeout(type, 1000); //Time delay between two bullets
      } else if (count === 1) {
        setTimeout(type, 5000); //Time delay after typing is finished
      } else {
        setTimeout(type, 40); //Typing speed
      }
    }());

  }, 1000);//Start time


}


// uni code for bullet "\u2022"
// uni code for tick mark "\u2714\uFE0F"
// line break "\r"
// line break for new bullet "/n"
#typBt {
  background-color: green;
  border: 20px solid;
  color: black;
  padding: 50px;
  text-align: center;
  text-decoration: underline overline;
  display: inline-block;
  font-size: 16px;
  margin: 50px 200px;
  cursor: pointer;
  border-radius: 50%;
  outline:none
}
    <pre id="typing"></pre>
    
    <button id="typBt" onclick="startTyping()">Show Typing</button>

标签： javascripthtmljquerycss

解决方案

假设你知道要加粗的文本......有一个JS字符串函数bold（）。

这可以帮助你...

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a string in bold.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var str = "Hello World!";
  var result = "The " + str.bold() + " is in bold";
  document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

检查：https ://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_str_bold

推荐阅读