Auto-Bold Words Within Speechmarks?

[JD]

URL: aeipathy.forums.net

I have no idea if this can be done through CSS or if it would need to be a plugin or what, so Imma just put it here in the general coding board.

Basically, on my roleplay site, everyone bolds their character's speech. So, I'm wondering if I can set something up where this happens automatically.

Now... I can do this through censored words but only if people type completely correct quotation marks around their speech - i.e. “ and ” -- I just change them to (b)“ and ”(/b) in the censored words and that works great. My problem is that when typing on a normal keyboard you don't get these formal (and different) quote marks, you just get "" which are identical and therefore I can't edit in this way.

Is there a way to either force the standard quote marks into the formal ones when people are typing their post? OR is there a way of basically saying - when a post contains "text" bold both the speech marks and the words within them?

As an added bonus, it would be great if this was something that could be board adjustable - others I have to copy and paste the code into a lot of headers and footers. But this is totally not a dealbreaker <3

[elli]

This isn't possible with CSS. There's no way to select text based on character.

You could add censored words for both curly quotes and straight quotes:

[b]" "[/b]
[b]“ ”[/b]
But that would affect all boards and could get messy if quotes were used elsewhere on your forum, or if the poster forgot to close the quote.

A find-and-replace script would be the best option. I found a regex pattern that does this exact thing and edited it to include both types of quotes:

codepen.io/ebbymac/pen/08434d06837a4a63137162860f5e7cac?editors=1010

Since post content is already sanitized, I don't think this will create any XSS vulnerability, but maybe someone more knowledgable can check to be sure.

Then to use on your forum:

<script>
$(document).ready(function() {
 var $postMessage = $('.posts .post .message');

 $postMessage.each(function() {
   var $this = $(this);
   var newContent = $this.html().replace(/[\"\“](\S[^\"\“\”]+\S)[\"\”]/g, "<strong>$1</strong>");

   $this.html(newContent);
 });
});
</script>

I'd say just put this in the footer of any board you wanted to use it on, but you could put it at the bottom of the Thread template (Admin > Themes > Layout Templates > Thread) and use a conditional to check for board ID:

{if $[thread.board.id] == 9 || $[thread.board.id] == 10}
... script
{/if}

[JD]

May 20, 2019 15:18:32 GMT -8 elli said:

This isn't possible with CSS. There's no way to select text based on character.

You could add censored words for both curly quotes and straight quotes:

[b]" "[/b]
[b]“ ”[/b]
But that would affect all boards and could get messy if quotes were used elsewhere on your forum, or if the poster forgot to close the quote.

A find-and-replace script would be the best option. I found a regex pattern that does this exact thing and edited it to include both types of quotes:

codepen.io/ebbymac/pen/08434d06837a4a63137162860f5e7cac?editors=1010

Since post content is already sanitized, I don't think this will create any XSS vulnerability, but maybe someone more knowledgable can check to be sure.

Then to use on your forum:

<script>
$(document).ready(function() {
 var $postMessage = $('.posts .post .message');

 $postMessage.each(function() {
   var $this = $(this);
   var newContent = $this.html().replace(/[\"\“](\S[^\"\“\”]+\S)[\"\”]/g, "<strong>$1</strong>");

   $this.html(newContent);
 });
});
</script>

I'd say just put this in the footer of any board you wanted to use it on, but you could put it at the bottom of the Thread template (Admin > Themes > Layout Templates > Thread) and use a conditional to check for board ID:

{if $[thread.board.id] == 9 || $[thread.board.id] == 10}
... script
{/if}

Elli, this works AMAZINGLY! But I have one small question - at the moment, it removes the " " marks when it bolds the text. Is there any way of keeping these in place (also bolded)? Forgive me if this is something simple - I am not very javascript savvy and I don't want to break the code ...>.<"

Also - which parts of this would I edit if I wanted to say make another version of this code where putting * * marks either side of text would italicise it etc? I'm so sorry to be a pain, but would you be able to highlight the bits I would need to edit to utilise this code in additional ways? <3

[elli]

JD Yeah, I've highlighted the quotes here in red:

<script>
$(document).ready(function() {
var $postMessage = $('.posts .post .message');

$postMessage.each(function() {
var $this = $(this);
var newContent = $this.html().replace(/[\"\“](\S[^\"\“\”]+\S)[\"\”]/g, "<strong>\"$1\"</strong>");

$this.html(newContent);
});
});
</script>

You need to be sure the back-slashes precede the quote to escape it, otherwise it will end the line early and create an error. You can replace this with curly quotes if you prefer.

To turn asterisks into italic text, this additional line would do the trick:

<script>
$(document).ready(function() {
var $postMessage = $('.posts .post .message');

$postMessage.each(function() {
var $this = $(this);
var newContent = $this.html().replace(/[\"\“](\S[^\"\“\”]+\S)[\"\”]/g, "<strong>\"$1\"</strong>"),
newContent = newContent.replace(/\*(\S[^\*]+\S)\*/g, "<em>$1</em>");

$this.html(newContent);
});
});
</script>

Regex is a little tricky. This site is really helpful for understanding what's going on.

[JD]

Jun 8, 2019 15:17:20 GMT -8 elli said:

JD Yeah, I've highlighted the quotes here in red:

<script>
$(document).ready(function() {
var $postMessage = $('.posts .post .message');

$postMessage.each(function() {
var $this = $(this);
var newContent = $this.html().replace(/[\"\“](\S[^\"\“\”]+\S)[\"\”]/g, "<strong>\"$1\"</strong>");

$this.html(newContent);
});
});
</script>

You need to be sure the back-slashes precede the quote to escape it, otherwise it will end the line early and create an error. You can replace this with curly quotes if you prefer.

To turn asterisks into italic text, this additional line would do the trick:

<script>
$(document).ready(function() {
var $postMessage = $('.posts .post .message');

$postMessage.each(function() {
var $this = $(this);
var newContent = $this.html().replace(/[\"\“](\S[^\"\“\”]+\S)[\"\”]/g, "<strong>\"$1\"</strong>");
newContent = newContent.replace(/\*(\S[^\*]+\S)\*/g, "<em>$1</em>");

$this.html(newContent);
});
});
</script>

Regex is a little tricky. This site is really helpful for understanding what's going on.

Thank you Elli! I will check this all over and see if I can teach myself a little more on how it all works! <3

[JD]

elli



This is working fantastically, until I have a link in the message.... Is there a way of editing this code so that it will not trigger for anything inside brackets?



The links work fine until the script runs and then I get this...



can we adjust it so that it doesn't trigger for anything in [] or <> brackets?

[elli]

JD Hm, that might get messy. This script is only meant for RP posts, right? Or did you plan to use the same syntax in general areas of your forum?

[JD]

Jul 1, 2019 12:14:52 GMT -8 elli said:

JD Hm, that might get messy. This script is only meant for RP posts, right? Or did you plan to use the same syntax in general areas of your forum?

It is going to only be used for RP posts yes, but it gets confused with tags when they are converted to links? <3

Any ideas on how to get around this? >..<"

[elli]

JD Do you expect that there would be links in RP posts? If not, you could put this script in Layout Templates > Thread with conditional template logic that only applies it to categories with RP boards:

{if $[thread.category_id] == 2 || $[thread.category_id] == 3}
 <script>
 $(document).ready(function() {
   var $postMessage = $('.posts .post .message');

   $postMessage.each(function() {
     var $this = $(this);
     var newContent = $this.html().replace(/[\"\“](\S[^\"\“\”]+\S)[\"\”]/g, "<strong>\"$1\"</strong>"),
         newContent = newContent.replace(/\*(\S[^\*]+\S)\*/g, "<em>$1</em>");

     $this.html(newContent);
   });
 });
 </script>
{/if}
But a lot of people like to use posting templates, which this will break. Anything with links, images, or inline styles. Otherwise, I can't think of a way that we can exclude HTML attributes.

Maybe someone else will have a better idea. 🤔

[Kami]

elli - can you specify that any text between quotes preceded by an equals sign specifically =" is excluded? If so, that can at least fix the issue regarding links breaking (and theoretically any other situation wherein quotes would be used for HTML/UBBC).

As far as something neater, I can't think of anything else since there's no real good way to only target text between quotations.

[elli]

I think this new pattern works?

/(?<!\=)[\"\“](?![\/\>])(\S[^\"\“\”]+\S)[\"\”]/g
regex101.com/r/XEdozS/1
ellitest.proboards.com/thread/32/bold-italic-test

<script>
$(document).ready(function() {
var $postMessage = $('.posts .post .message');

$postMessage.each(function() {
var $this = $(this);
var newContent = $this.html().replace(/(?<!\=)[\"\“](?![\/\>])(\S[^\"\“\”]+\S)[\"\”]/g, "<strong>\"$1\"</strong>"),
newContent = newContent.replace(/\*(\S[^\*]+\S)\*/g, "<em>$1</em>");

$this.html(newContent);
});
});
</script>

[JD]

Jul 2, 2019 12:56:15 GMT -8 elli said:

I think this new pattern works?

/(?<!\=)[\"\“](?![\/\>])(\S[^\"\“\”]+\S)[\"\”]/g
regex101.com/r/XEdozS/1
ellitest.proboards.com/thread/32/bold-italic-test

<script>
$(document).ready(function() {
var $postMessage = $('.posts .post .message');

$postMessage.each(function() {
var $this = $(this);
var newContent = $this.html().replace(/(?<!\=)[\"\“](?![\/\>])(\S[^\"\“\”]+\S)[\"\”]/g, "<strong>\"$1\"</strong>"),
newContent = newContent.replace(/\*(\S[^\*]+\S)\*/g, "<em>$1</em>");

$this.html(newContent);
});
});
</script>

Eeeeep!! Yes this works perfectly thank you so much!!! And yes I have already placed the code within if parametres so it only effects RP boards <3 thanks for the help you guys!!!

[JD]

Apologies to bring this thread up again, but I wanted to see if it was possible at all for this code (which works beautifully in Chrome) to also work in Safari and Firefox? Because it appears to not?

Also, on a separate note. If you have a thread that has more than one page, when you click to open the next page of the thread, *those* posts do not have bold speech. You have to then refresh for that page to show bold. Is there a way to edit this?

[elli]

It looks like Chrome is the only browser that has implemented RegEx Lookbehind so far, which is this bit in the code:

(?<!\=)
So currently, Firefox and Safari consider that "invalid". I'm not sure if there's another way to do this. I'm not great with RegEx, unfortunately. But I can fix your second problem.

<script>
$(function() {
 function postRegex() {
   var $postMessage = $('.posts .post .message');

   $postMessage.each(function() {
     var $this = $(this);
     var newContent = $this.html().replace(/(?<!\=)[\"\“](?![\/\>])(\S[^\"\“\”]+\S)[\"\”]/g, "<strong>\"$1\"</strong>");
     var newContent = newContent.replace(/\*(\S[^\*]+\S)\*/g, "<em>$1</em>");

     $this.html(newContent);
   });
 }

 postRegex();
 pb.events.on('afterSearch', postRegex);
});
</script>
Working here: ellitest.proboards.com/thread/2/spam (Go to page 2 to see it working)

[JD]

Perfect! Thank you elli ! Thanks for trying on the first and the second solution works perfectly! <3