Question

我正在尝试像Stackoverflow那样制作我自己的可降价的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 boldText(text){
    var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
    var html = text.replace(bold, '<strong>$1</strong>');            
    return html;
}

alert(boldText('te**st**ing'));

See JSFiddle

Answer 2

一方面你的正则表达式被打破了。你可能想要更像的东西：

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

*是正则表达式中的特殊字符。如果您想与文字*匹配，则需要使用\转义它。

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

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

Answer 3

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

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

Answer 5

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

// _app
function MyApp({ Component, pageProps }) {
    return (
        <>
            <div className="App">
                <Sidebar />
                <Component {...pageProps} />
            </div>
        </>
    )
}

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/

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

7 个答案: