12

Stackoverflow が行ったように、独自のマークダウン可能なテキストエリアを作成しようとしています。目標は、人々が**blah blah**テキストエリアに入力して、div に出力できるようにすること<span style="font-weight:bold;">blah blah</span>です。

**アスタリスクを見つけてHTMLに置き換えるJavaScriptに問題があります。

ここにパーティーを始めた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 タグと一緒に使用することもできます (stackoverflow プレビューにもこれが必要です)。

于 2018-03-25T21:59:10.160 に答える
1

ゼロから作成する理由 非常に多くのオープン ソース エディターが存在するため、好きなコード ベースを選択してそこから移動する必要があります。 http://oscargodson.github.com/EpicEditor/ http://markitup.jaysalvat.com/home/

于 2012-04-16T03:52:43.240 に答える
-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 に答える