Markdown 将双星号转换为 javascript 中的粗体文本

Question

我正在尝试像 Stackoverflow 一样制作我自己的可降价文本区域。目标是允许人们在 textarea 中输入 **blah blah**，并在 div 中输出 <span style="font-weight:bold;">blah blah</span>。

我在使用 javascript 查找并用 HTML 替换**星号时遇到问题。

这是一个让派对开始的 jsfiddle：http://jsfiddle.net/trpeters1/2LAL4/14/

这里的 JS 只是为了告诉你我在哪里：

$(document.body).on('click', 'button', function() {

var val=$('textarea').val();

var bolded=val.replace(/\**[A-z][0-9]**/gi, '<span style="font-weight:bold;">"'+val+'" </span>');

$('div').html(bolded);
});

还有 HTML...

<textarea></textarea>
<div></div><button type="button">Markdownify</button>

任何想法将不胜感激！

谢谢， 时间

Answer 1

当字符紧接在星号之前或之后时，其他答案会失败。​​

这就像降价应该：

function bold(text){
    var bold = /\*\*(.*?)\*\*/gm;
    var html = text.replace(bold, '<strong>$1</strong>');            
    return html;
}
    
var result = bold('normal**bold**normal **b** n.');
document.getElementById("output").innerHTML = result;

div { color: #aaa; }
strong { color: #000; }

<div id="output"></div>

Answer 2

所提供的答案都不适用于所有情况。例如，如果我们在双星旁边有一个空格，则其他解决方案将不起作用，即：

This will ** not ** be bold

所以我写了这个：

function markuptext(text,identifier,htmltag)
{
    var array = text.split(identifier);
    var previous = "";
    var previous_i;
    for (i = 0; i < array.length; i++) {
        if (i % 2)
        {
            //odd number
        }
        else if (i!=0)
        {
            previous_i = eval(i-1);
            array[previous_i] = "<"+htmltag+">"+previous+"</"+htmltag+">";
        }
        previous = array[i];
    }
    var newtext = "";
    for (i = 0; i < array.length; i++) {
        newtext += array[i];
    }
    return newtext;
}

只要这样称呼它：

thetext = markuptext(thetext,"**","strong");

它适用于所有情况。当然，您也可以根据需要将其与其他标识符/html-tags 一起使用 （stackoverflow 预览也应该有这个）。

Answer 3

为什么要从头开始创建？有这么多开源编辑器，你应该选择一个你喜欢的代码库并从那里开始。 http://oscargodson.github.com/EpicEditor/ http://markitup.jaysalvat.com/home/

Answer 4

react 中的自定义组件接收 boolean 之类的粗体

{(() => {
  const splitText = theText.split('**');
  return (
    <TextByScale>
      {splitText.map((text, i) => (
        <TextByScale bold={!!(i % 2)}>{text}</TextByScale>
      ))}
    </TextByScale>
  );
})()}

Answer 5

选择适合您需求的完美正则表达式。 如果您不希望样式跨越新行并且还使用([^*<\n]+) 确保样式之间至少有一个字符，否则** 之间没有字符将导致不可见。

function format_text(text){
return text.replace(/(?:\*)([^*<\n]+)(?:\*)/g, "<strong>$1</strong>")
     .replace(/(?:_)([^_<\n]+)(?:_)/g, "<i>$1</i>")
      .replace(/(?:~)([^~<\n]+)(?:~)/g, "<s>$1</s>")
      .replace(/(?:```)([^```<\n]+)(?:```)/g, "<tt>$1</tt>")
}

•上述代码的缺点是，您不能嵌套样式，即 *_Bold and italic_*

要允许嵌套样式使用这个?

format_text(text){
return text.replace(/(?:\*)(?:(?!\s))((?:(?!\*|\n).)+)(?:\*)/g,'<b>$1</b>')
   .replace(/(?:_)(?:(?!\s))((?:(?!\n|_).)+)(?:_)/g,'<i>$1</i>')
   .replace(/(?:~)(?:(?!\s))((?:(?!\n|~).)+)(?:~)/g,'<s>$1</s>')
   .replace(/(?:--)(?:(?!\s))((?:(?!\n|--).)+)(?:--)/g,'<u>$1</u>')
   .replace(/(?:```)(?:(?!\s))((?:(?!\n|```).)+)(?:```)/g,'<tt>$1</tt>');

// extra:
// --For underlined text--
// ```Monospace font```
}

? 如果您希望您的样式跨越新行，请从正则表达式中删除 \n。此外，如果您的新行是 html 中断标记，您可以将 \n 替换为 <br>

稍后谢谢！

Answer 6

如果您使用的是 jQuery，请替换：

$(document.body).on('click', 'button', function() {

用这个：

$("button").click(function () {

Answer 7

以下正则表达式将找到您的星号环绕的文本：

/\x2a\x2a[A-z0-9]+\x2a\x2a/

我更新了你的小提琴作为例子：http://jsfiddle.net/2LAL4/30/

Answer 8

一方面，您的正则表达式已损坏。你可能想要更多类似的东西：

/\*\*[A-z0-9]+\*\*/gi

* 是正则表达式中的特殊字符。如果要匹配文字 *，则需要使用 \ 对其进行转义。

例如：http://jsfiddle.net/2LAL4/22/

但是，即使进行了这种更改，在您到达您真正想去的地方之前，还有很长的路要走。例如，如果文本区域包含粗体和非粗体文本，则您的示例将不起作用。