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

Question

我有一个textarea，一个按钮和一个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>

它会在单击按钮时显示div上textarea的值 如果我在textarea中输入两个*之间的字符串，我想在div上显示粗体文本 例如，我输入Hello *Mike*给div中的Hello Mike

Answer 1

这可以使用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

您可以使用正则表达式匹配粗体模式：

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

然后您可以使用替换功能来替换匹配的模式！

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

你可以在这里测试你的正则表达式qazxsw poi

Answer 3

您需要找到以https://regex101.com开头和结尾的文本，然后从匹配的字符串中切割**。以下是我更新的代码 -

**

   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;
   }