tolgaaaltas

Change extend.php, Line 29:

entries[i].innerHTML = entries[i].innerHTML.replace(/#(\w+)/g,'<a href="/?q=$1" title="Find more posts tagged with #$1">#$1</a>');

to

entries[i].innerHTML = entries[i].innerHTML.replace(/#([a-zA-Z0-9ğüşöçİĞÜŞÖÇ]+)/g,'<a href="/?q=$1" title="Find more posts tagged with #$1">#$1</a>');

      Cool, really good feedback, thanks everyone! Yes, I will need to look into optimizing the regex for more languages. And, good point around the search link not working for certain installations. I think if I simply remove the slash in the URL that will fix it. Worst case I can add instructions around how to quickly/easily mess around with the search URL. Because you can also do something like, have your hashtags search Twitter instead of your forum. Or, search Google. Be right back with a new version.

        rob006 This solution hasn't worked so far but I'll keep trying later. I read somewhere that a JavaScript RegEx should use double slashes between each character you want included. This solution has single slashes. That may or may not make a difference.

            tolgaaaltas Try updating this extension and let me know if it works now with Turkish characters. All I have done is, I changed the RegEx from "w" which looks for any English letter, to "S" which looks for any character. This may not work either because it seems as though current JavaScript RegEx was built to work best/easiest with English characters.

            But, once JavaScript ES6 is widely adopted, there are new shortcuts available to include all Unicode.

            There are also additional plugins or libraries I could add to this to ensure any new ES6 RegEx code works. But, I'm on my phone in a parking lot right now and I'm just not going down that path today.

            Also, this should work even if your Flarum is in a subdirectory, I know someone mentioned that.

            Finally, see Alshain's post to get an idea around how you can mess around with this part of the code yourself.

            If anyone finds a better, tested and working, JavaScript RegEx, let me know! And by tested and working I mean tested with this exact extension. Because a RegEx out there might work for one situation, but not work with this extension's code. 🙂

                  010101 Works for me: https://jsfiddle.net/qskueazw/

                  010101 I think if I simply remove the slash in the URL that will fix it.

                  I think it will make it only worse - for example from this topic URL will be resolved to https://discuss.flarum.org/d/20945-hashtags?q=hashtag. You need to get forum base URL from Flarum and use it in generated URL.

                      tolgaaaltas

                      Sorry about that. It is because it is looking for any "#" character to know when to add a link. Certain extensions may be coded in such a way that the JavaScript in this extension breaks them because it's not smart enough to ignore certain # characters. Most of the time the JavaScript ignores behind the scenes hashtags, but it depends.

                      If you really love fancybox, you'll have to remove this extension. But, if you'd rather have hashtag links, remove fancybox.

                      Or, you could go with a different symbol. The only issue is, because of Twitter, so many people are very used to tags being #thetag. So, if you use a different beginning identifying character, your forum members would have to get used to using it instead of "#."

                      For example, you could go with "+." Your tags would then look like: +thetag. This way, there will be less conflicts because a lot of HTML and CSS uses #... but not + or another special character.

                      If you want to mess around with this, go to line 29 in this extension's extend.php file. You will see this:
                      entries[i].innerHTML = entries[i].innerHTML.replace(/#(\S+)/g,'<a href="/?q=$1" title="Find more posts tagged with #$1">#$1</a>');

                      Right after innerHTML.replace you will see (/#; change that # to another character.

                      Another problem with this though is if I ever release a new version of this extension and you update... you will lose this change. But, it's quick to edit and change back.

                          Actually, this extension breaks any other extension relying on javascript events on the post content. Because it's replacing the innerHTML of the whole post, it removes all event listeners (EDIT: actually, only paragraphs. code blocks or lists aren't affected).

                          This means the quotes from Flarum also partially stop working. There's no longer any preview when hovering and clicking on the mention forces a reload of the whole page instead of just scrolling to the place.

                          Also if there's a hashtag in the middle of an inline code block, it will be converted to a link as well.

                          There's an issue matching any inline content that's inside an HTML element. For example `#test` is replaced with a link to #test</code>. **#bold** is replaced with a link to bold</strong>. matteocontrini suggestion might fix this.

                              I've had to do a similar thing recently and I got to this regex:

                              \b(WORD)\b(?![^<]*>|[^<>]*</[^p])

                              which is inspired by this one. From what I remember it should match anything that is inside a paragraph but not inside other HTML tags.

                              The regex is then applied by extending the init method of the CommentPost.

                              @matteocontrini @clarkwinkelmann @tolgaaaltas

                              Something as simple as this might work too:
                              (?<!["])\#(\S+)

                              I’m at work right now so I can’t do anything related to this. But, I’ll do some testing at some point.

                              The above says, match hashtags, BUT, not if a “ (quote) character precedes the hashtag. Why do this? Because most of the conflicts have to do with this type of situation: <a href=“#something”> It sees that # and converts it. But, with the above regexp, that will be ignored.

                              I’ll try the other ideas above too.

                              @matteocontrini Thanks for the \b suggestion. It will work at the end, preventing things like a period from being converted. So, that’s good. But, adding that at the beginning does nothing.

                              But I think I’ve found a solution. Something like what I posted above would work. The problem is it uses a negative look behind. Not all browsers support that yet. So, instead, the following also seems to work. I will test it out on my forum, and if it works, I’ll push out a new version for this extension.

                              ((?!([="<])).|^)#(\S+)\b

                              It’s so simple, beautiful, and compact. That’s what I love.

                              Version 1.2 Released!

                              (Parrot)

                              • Now with HTML ignorify (tm)!
                                • In other words, now this should not break other extensions.

                              Proof:
                              https://codepen.io/zerosonesfun/pen/PMQyae

                              And in case you like looking at RegEx, this is the beautiful solution:
                              /((?!([\S])).|^)#(\S+)\b/g

                              So, tolgaaaltas - if you want you could try this again.

                              And, now the world has a new simple JavaScript snippet which I think is better than a lot of the Hashtag JavaScript snippets out there. Even this autolinker.js I found out there didn't do this. In other words, you could use this on your regular website, WordPress, or wherever and it's so easy to implement a 3 year old could do it! 🙂 Just look at how it is done on the above CodePen page.

                              If you already have this installed, do the good 'ol:
                              composer update zerosonesfun/hashtags

                                  tolgaaaltas I tested it on my Flarum. It ignores HTML type characters. So, there must be another reason it is conflicting with that one extension. Can you post screenshots? And after re-adding this extension did you ensure caches were clear?

                                  It could be a basic JavaScript conflict. Which happens. Anything in your browser’s dev console? Any errors being reported anywhere else?