12

我正在尝试像 Stackoverflow 一样制作自己的可降价文本区域。目标是允许人们输入**blah blah**textarea 并在 div be 中输出<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>

任何想法将不胜感激！

谢谢，蒂姆

4

8 回答 8

21

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

这就像降价应该：

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>

于 2015-08-11T04:16:00.200 回答
4

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

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 预览也应该有这个）。

于 2018-03-25T21:59:10.160 回答
1

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

于 2012-04-16T03:52:43.240 回答
0

反应中的自定义组件接收粗体，如布尔值

{(() => {
  const splitText = theText.split('**');
  return (
    <TextByScale>
      {splitText.map((text, i) => (
        <TextByScale bold={!!(i % 2)}>{text}</TextByScale>
      ))}
    </TextByScale>
  );
})()}
于 2021-01-25T17:09:52.130 回答
0

选择适合您需求的完美正则表达式。如果您不希望样式跨越新行并且还使用([^*<\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>

晚点再谢我！

于 2021-12-02T13:58:42.793 回答
-1

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

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

有了这个：

$("button").click(function () {
于 2012-04-16T03:17:40.430 回答
-1

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

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

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

于 2012-04-16T03:29:07.170 回答
-2

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

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

*是正则表达式中的特殊字符。如果你想匹配一个文字*，那么你需要用\.

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

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

于 2012-04-16T03:23:06.690 回答