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

Question

我正在尝试像 Stackoverflow 那样制作我自己的 Markdown-able textarea。 目标是允许人们在 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

反应中的自定义组件接收像布尔值一样的粗体

{(() => {
  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 break 标记，则可以将\\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/

然而，即使有了这种改变，在你到达你真正想去的地方之前，还有一段公平的路要走。 例如，如果文本区域包含粗体和非粗体文本，您的示例将不起作用。