11
votes

Marque pour convertir des double astérisques en caractères gras dans JavaScript

J'essaie de faire mon propre textarea de marquage comme Stackoverflow a fait. L'objectif est de permettre aux gens de taper ** bla bla ** dans une textarea et de la sortie dans un div être bla bla .

J'ai des problèmes avec le JavaScript pour trouver et remplacer les astérisques ** avec le code HTML.

Voici un jsfiddle qui a commencé la fête: http://jsfiddle.net/trpeterers1/2lal4/14/

Voici le JS sur cela juste pour vous montrer où je suis à: xxx

et le HTML ... xxx < p> Toute pensée serait grandement appréciée!

merci, TIM


1 commentaires

Le problème est résolu, Vérifiez ma réponse!


7 Réponses :


-1
votes

Si vous utilisez jQuery, remplacez ceci: xxx

avec ceci: xxx


3 commentaires

Bonjour Gustavo, merci pour votre entrée, oui, j'utilise jQuery, la méthode on est une méthode JQuery commençant par 1,7 api.jquery.com/on qui attache des gestionnaires d'événements au sélecteur dans ce cas le document.bon. Il est particulièrement utile pour les éléments, tels que des boutons dans ce cas, créés de manière dynamique, par exemple par Ajax.


Thats ne répond pas vraiment à la question, n'est-ce pas?


Désolé, cela ne répond pas vraiment à la question. J'ai raté le document tout aussi ... Cela ressemble à votre regex qu'il est cassé, comme la réponse ci-dessous, mais la regex ci-dessous est cassée aussi.



-2
votes

Votre regex est cassé, pour une chose. Vous voulez probablement quelque chose de plus comme: xxx

Le * est un caractère spécial dans des expressions régulières. Si vous souhaitez correspondre à un littéral * , vous devez vous échapper avec \ .

par exemple: http://jsfiddle.net/2lal4/22/

Cependant, même avec ce changement, il y a encore une foire façons d'aller avant d'arriver à l'endroit où vous voulez vraiment être. Par exemple, votre exemple ne fonctionnera pas si la zone de texte contient un mélange de texte audacieux et non audacieux.


3 commentaires

Salut Athoth, merci, oui je vois qu'il y a un moyen d'aller. On dirait que je dois d'abord trouver le texte enveloppé par l'astérisque, de sorte que je ne sélectionne pas l'ensemble du textarea.val () . Voulez-vous vous déranger avant que j'arrête de vous pesser plus pour vous fournir des indices sur cela aussi?


Si vous en avez besoin de celui qui permet aux espaces dans la police en gras: jsfiddle.net/2LAL4/172


DS ** D ** D devient DS DSDD D , ce qui ne va pas. :(



-1
votes

L'expression régulière suivante trouvera votre texte enveloppé par astérisque:

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

J'ai mis à jour votre violon à titre d'exemple: http://jsfiddle.net/2LAL4/30/


0 commentaires

1
votes

Pourquoi créer à partir de zéro? Avec autant d'éditeurs open source là-bas, vous devriez choisir une base de code que vous aimez & partir de là. http://oscargodson.github.com/epederSitor/ http://markitup.jaysalvat.com/home/


5 commentaires

Salut Tom, merci pour ces suggestions, EpiceDitor est assez agréable. Cependant, ces éditeurs sont trop impliqués à mes besoins. Je préférerais passer mon temps à apprendre à coder les caractéristiques simples que je veux (juste audacieux, en italique, texte de liens hypertexte) que d'essayer de déconvoler ces basses générales complexes. La raison plus ennuyeuse est que j'ai déjà dépensé beaucoup de temps ce week-end de façon ridiculement frustrée par un comportement iframe dans divers navigateurs et la plupart des éditeurs, y compris ceux que vous mentionnez, utilisez des iframes. Donc, je ne peux tout simplement pas supporter ça.


Ah Ok Tim, comment de cette question: Github.com/coreyti/showdown/ blob / maître / src / showdown.js explique le regex décemment. Aussi pour le code plus propre, mais moins de commentaires: Github.com/chjjjjjarked /blob/master/lib/marked.js


Veuillez rester en contact @tim sur ce qui est le mieux pour vous; Je veux créer ma propre version de Markdown. Je veux créer des codes qui m'aidieux pour moi:


Bonjour Tom, je l'ai effectivement travaillé très bien maintenant grâce à l'aide de tout le monde, consultez cette démo: Jsfiddle. Net / TRPETERS1 / 2LAL4 / 49


Cool, fonctionne ici! Une chose si: normalement, vous voudriez en.wikipedia.org/wiki/separation_of_presentation_and_content donc J'ai fait: jsfiddle.net/tombyrer/2lal4/50 (BTW, marquage utilise Au lieu de ) Je me demande toujours si le double Val.replace est nécessaire, mais je ne suis pas si bon avec regex donc je ne peux donc pas réparer ATM.



22
votes

Les autres réponses échouent lorsqu'un caractère est immédiatement avant ou après les astérisques.

Ceci fonctionne comme Markdown devrait: P>

p>

<div id="output"></div>


4 commentaires

Cela ne fonctionne pas si la première occurrence est suivie d'un autre occurrence qui ne contient qu'une lettre jsfiddle.net/b5gvajsx/ 9


Si quelqu'un déterminera comment résoudre le problème Laurelb mentionné ^, veuillez poster un commentaire.


Dans un renvoyer le texte.replace (/ \ * \ \ * (\ s (. *? \ S)?) \ * \ * / Gm, 1 $ ')


Supprimer tout ce qui semble avoir résolu le problème de Laurelb. Réponse mise à jour.



4
votes

Aucune des réponses fournies ne fonctionne dans tous les cas. Par exemple, les autres solutions ne fonctionnent pas si nous avons un espace à côté de la double étoile, c'est-à-dire: xxx pré>

donc j'ai écrit ceci: p> xxx pré> Appelez-le comme ceci: P>

thetext = markuptext(thetext,"**","strong");


1 commentaires

"Test Regex In * JavaScript * lorsque vous utilisez Différent ** Stuff **" avec markupext (theText, "*" "", "fort"); retourne " Regex dans JavaScript lorsque vous utilisez différents Stuff "



0
votes

Composant personnalisé dans React qui reçoit audacieux comme booléen xxx


0 commentaires