想要在 html 中使用 * 的粗体文本

Question

I have a textarea, a button and a div

 function showres() { var text = document.getElementById('mytext'); var result = document.getElementById('resulthere'); result.innerHTML = text.value; }

 <textarea name="mytxt" id="mytext"></textarea> <button onclick="showres()">Click Me</button> <div id="resulthere"></div>

It shows the value of textarea on the div on clicking the button
I want to show bold text on div if I input a string between two * in textarea
For example I type Hello *Mike* give Hello in div

Answer 1

This can be achieved using Regex.

 function showres() { var text = document.getElementById('mytext').value; var result = document.getElementById('resulthere'); text.match(/\\*([\\w\\s\\d]+)?\\*/g).forEach(function(match) { var str = match.substring(1, match.length - 1); text = text.replace(match, "<b>" + str + "</b>"); }); result.innerHTML = text; } document.getElementById('mytext').value = "this is *bold*"; showres();

 <textarea name="mytxt" id="mytext"></textarea> <button onclick="showres()">Click Me</button> <div id="resulthere"></div>

Answer 2

You can use regex to match bold pattern:

var yourString = 'something left *bold text 123*';
var regex = /\*([\w\s\d]+)?\*/g;
var matches = yourString.match(regex);
// matches = ['*bold text 123*']

Then you can use replace function to replace matched patern by your way!

for (var i = 0; i < matches.length; i++) {
  yourString = yourString.replace(matches[i], yourBoldString);
}

Your can test your regex here https://regex101.com

Answer 3

You need to find the text starting and ending with ** and then slice the ** from the matching string. Following is my updated code -

 function showres() { var text = document.getElementById('mytext'); var result = document.getElementById('resulthere'); var textVal = text.value var str = textVal.replace(/\\*([\\w\\s\\d]+)?\\*/g, function(x){ return "<b>"+x.slice(1, -1)+"</b>"; }); result.innerHTML = str; }

 <textarea name="mytxt" id="mytext"></textarea> <button onclick="showres()">Click Me</button> <div id="resulthere"></div>