Markdown для преобразования двойных звездочек в жирный текст в javascript

я пытаюсь создать свою собственную текстовую область с возможностью уценки, как это сделал Stackoverflow. Цель состоит в том, чтобы позволить людям вводить **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>

любые мысли будут очень признательны!

спасибо, тим


person tim peterson    schedule 16.04.2012    source источник
comment
Проблема решена, проверьте мой ответ!   -  person 001    schedule 05.11.2020


Ответы (7)


Ваше регулярное выражение сломано, во-первых. Вы, вероятно, хотите что-то большее, например:

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

* — это специальный символ в регулярных выражениях. Если вы хотите сопоставить литерал *, вам нужно экранировать его с помощью \.

Например: http://jsfiddle.net/2LAL4/22/

Тем не менее, даже с этим изменением еще предстоит пройти немало времени, прежде чем вы доберетесь до того, чего действительно хотите. Например, ваш пример не будет работать, если текстовая область содержит смесь полужирного и нежирного текста.

person aroth    schedule 16.04.2012
comment
привет, Арот, спасибо, да, я вижу, что есть выход. Похоже, мне нужно сначала найти текст, заключенный в звездочку, чтобы я не выбирал весь textarea.val(). Вы не возражаете, прежде чем я перестану приставать к вам, чтобы дать подсказки и по этому поводу? - person tim peterson; 16.04.2012
comment
Если вам нужен шрифт с пробелами, выделенный жирным шрифтом: jsfiddle.net/2LAL4/172 - person Sean; 15.04.2015
comment
ds**d**d становится ds<b>dsdd</b>d, что неверно. :( - person Benny Neugebauer; 02.02.2017

Другие ответы терпят неудачу, когда символ находится непосредственно перед звездочками или после них.

Это работает так, как уценка должна:

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>

person Justin    schedule 11.08.2015

Ни один из предоставленных ответов не работает во всех случаях. Например, другие решения не будут работать, если у нас есть пробел рядом с двойной звездой, то есть:

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 это тоже должно быть).

person Mikael Eriksson    schedule 25.03.2018
comment
"testing regex in *javascript* when using different **stuff**" с markuptext(thetext,"*","strong"); возвращает "testing regex in <strong>javascript</strong> when using different <strong></strong>stuff<strong></strong>" - person Animismus; 02.09.2019

Зачем создавать с нуля? С таким количеством редакторов с открытым исходным кодом вы должны выбрать базу кода, которая вам нравится, и двигаться дальше. http://oscargodson.github.com/EpicEditor/ http://markitup.jaysalvat.com/home/

person tomByrer    schedule 16.04.2012
comment
привет, Том, спасибо за эти предложения, EpicEditor очень хорош. Однако эти редакторы слишком заняты для моих нужд. Я лучше потрачу свое время на изучение того, как кодировать простые функции, которые мне нужны (просто полужирный шрифт, курсив, текст с гиперссылками), чем пытаться разобрать эти сложные кодовые базы. Более скучная причина заключается в том, что я уже потратил МНОГО времени на этих выходных, до смешного расстраиваясь из-за поведения iframe в различных браузерах и в большинстве редакторов, включая упомянутые вами, которые используют iframe. Так что я просто не могу больше этого выносить. - person tim peterson; 16.04.2012
comment
А, хорошо, Тим, как насчет этого: github.com/coreyti/showdown/ blob/master/src/showdown.js Достойно объясняет регулярное выражение. Также для более чистого кода, но меньше комментариев: github.com/chjj/marked /blob/master/lib/marked.js - person tomByrer; 16.04.2012
comment
Пожалуйста, оставайтесь на связи с @tim по поводу того, что лучше для вас; Я также хочу создать свою собственную версию MarkDown. Я хочу создать понятные мне коды: ‹pre›/italic/ жирный подчеркнутый -deleted- [Возможно url|www.url.com]‹/pre› . Я надеюсь, что вы можете проследить за мной, пожалуйста :) - person tomByrer; 17.04.2012
comment
привет, Том, теперь у меня все работает довольно хорошо, благодаря всеобщей помощи, посмотрите эту демонстрацию: jsfiddle. сеть/trpeters1/2LAL4/49 - person tim peterson; 17.04.2012
comment
Круто, здесь работает! Но есть одно но: обычно вам нужно en.wikipedia.org/wiki/Separation_of_presentation_and_content, поэтому Я сделал: jsfiddle.net/tomByrer/2LAL4/50 (кстати, MarkDown использует ‹strong › вместо ‹b›) Мне все еще интересно, нужны ли двойные val.replace, но я не так хорошо разбираюсь в RegEx, поэтому не могу исправить ATM. - person tomByrer; 18.04.2012

пользовательский компонент в реакции, который получает полужирный шрифт, как логическое значение

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

Если вы используете jQuery, замените это:

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

с этим:

$("button").click(function () {
person Gustavo Gondim    schedule 16.04.2012
comment
привет, Густаво, спасибо за ваш вклад, да, я использую jQuery, метод on — это метод jQuery, начинающийся с 1.7 api.jquery.com/on, который прикрепляет обработчики событий к селектору, в данном случае к document.body. Это особенно полезно для элементов, таких как в данном случае кнопки, которые создаются динамически, например, с помощью AJAX. - person tim peterson; 16.04.2012
comment
это на самом деле не отвечает на вопрос, не так ли? - person Marty Cortez; 16.04.2012
comment
Извините, это не совсем ответ на вопрос. Я тоже пропустил готовый документ ... Похоже, ваше регулярное выражение не работает, как и ответ ниже, но регулярное выражение под ним тоже не работает. - person Gustavo Gondim; 16.04.2012

Следующее регулярное выражение найдет ваш текст, заключенный в звездочку:

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

Я обновил вашу скрипку в качестве примера: http://jsfiddle.net/2LAL4/30/

person Marty Cortez    schedule 16.04.2012