检查文本中的任何单词是否与数组匹配

Question

I want to achieve the following:

1) Check every word from a textarea if it is a guitar chord.

To do that, I created an array which contains all characters that guitar chords have (if a word matches the characters from this array it is a guitar chord):

var Regex = /^\s*(?:(A|B|C|D|E|F|G|A#|C#|D#|F#|G#|Ab|Bb|Db|Eb|Gb){1}(?:m|\+|\-|aug|dim|add|b|#|1|2|3|4|5|6|7|8|9|0|\/)*\s*)+$/;

2) If a word matches, I want it to become a link, pointing to an URL customized by the word itself.

eg The following line

Am   Bb  C# Dadd9
Song lyrics here

should turn into

<a href="example.com/Am">Am</a>   <a href="example.com/Bb">Bb</a>  <a href="example.com/C#">C#</a> <a href="example.com/Dadd9">Dadd9</a>
Song lyrics here

And here's what I've com up to for step 2:

var link = "http://www.example.com/";
      $.each(chord, function(index, value) {   //append link to chord
        $('.output').append('<a href="' + link + value + '">' + value + '</a> ');
      });

But I need to define "chord". How can I do to check each word, then if it is a chord (matching "Regex" characters) append link?

Answer 1

You can use String.prototype.replace() .

For brevity, let's assume we want to target the Am , Bb and C# chords.

// create a map for the chords to the anchors
var chordsAnchorsMap = {
    "Am": "<a href='https://example.com/a-minor'>Am</a>",
    "Bb": "<a href='https://example.com/b-flat'>Bb</a>",
    "C#": "<a href='https://example.com/c-sharp'>C#</a>"
};

// regular expression for the chords
var regex = /(Am|Bb|C#)/g;

var string = "Am    Bb    C#    Bb   M    Bb";

// replace all instances of the chords with their mapped anchors
var result = string.replace(regex,
    function(capturedChord) {
        // if chord is mapped to an anchor, replace it with the appropriate anchor
        if (chordsAnchorsMap.hasOwnProperty(capturedChord)) {
            return chordsAnchorsMap[capturedChord];
        }
        // else, return the just chord itself (in other words - don't replace it)
        return capturedChord;
    }
);

Now result would contain:

<a href='https://example.com/a-minor'>Am</a>    <a href='https://example.com/b-flat'>Bb</a>    <a href='https://example.com/c-sharp'>C#</a>    <a href='https://example.com/b-flat'>Bb</a>   M    <a href='https://example.com/b-flat'>Bb</a>

Answer 2

Here is a distilled version of @GuyWaldman's approach.

What this does is to generate the HTML elements dynamically instead of using an object.

 var chordPattern = /(?:(A|B|C|D|E|F|G|A#|C#|D#|F#|G#|Ab|Bb|Db|Eb|Gb){1}(?:m|\\+|\\-|aug|dim|add|b|#|1|2|3|4|5|6|7|8|9|0|\\/)+)/g; var str = `Am Bb C# Dadd9 Song lyrics here`; var html = str.replace(chordPattern, function(value){ return "<a href='https://example.com/"+value+"'>"+value+"</a>"; }); document.write(html); 

You may need to adjust the regex because I'm not sure if it will match all possible chords or if it matches only chords. You will also have to find a way to deal with the special characters in the URLs