Javascript 吉他和弦自定义标记简单分析器

我使用markdown来存储带有和弦的歌词，效果非常好。 为和弦使用*标记

，并使用css对其进行定位

但现在我希望它出现在展示中，而降价解析在这里很复杂。 我尝试插入带有str.replace的标记，但无法关闭标记

text text *chord* text text 

替换为：

text text <em>chord<em> text text 

文本文本和弦文本文本

我当然需要：

text text <em>chord</em> text text 

文本文本和弦文本文本

请你知道一些简单的解决方案来解析像这样的自定义标签吗？

---

Javascript/Jquery。

您可以使用Regex来实现所需的功能。您可以捕获

*

字符及其之间的字符，然后用

标记替换

*

。大概是这样的：

var输入='text text*chord*text*chord*text'；
var output=input.replace（/\*（.*？）\*/g，$1'）；
控制台日志（输出）查看以下函数。它迭代字符串中的每个字符，并在需要时将“*”替换为
或

/**
 * parse function parse the input raw string and replaces the
 * the star(*) with <em> and </em> where needed.
 * @returns Returns the replaced string.
 */
function parse(str) {
    var ret = ""; // initialize the string.

    for (var x = 0; x < str.length; ++x) {
        if (str[x] == '*') { // The opening.
            ret += "<em>";
            ++x;

            for(; x < str.length; ++x) {
                if (str[x] == '*') { // and the ending is here.
                    ret += "</em>";
                    break;
                } else {
                    ret += str[x];
                }
            }
        } else {
            ret += str[x];
        }
    }

    return ret;
}

console.log(parse("Hello *JS*")); // outputs 'Hello <em>JS</em>

var element = document.querySelector('.chords');
element.innerHTML = parse(element.innerText);

/**
*parse函数解析输入的原始字符串并替换
*星号（*）带有和在需要的地方。
*@返回替换的字符串。
*/
函数解析（str）{
var ret=”“；//初始化字符串。
对于（变量x=0；x
感谢您的快速回复，请您帮助我编写代码，让它阅读并替换.ooooo的内容。Ooooooo，它可以处理这样的小代码，而不需要标记解析器。真的，真的，真的谢谢你。这是一个令人惊奇的社区。没问题，很高兴再问一个问题。是否替换由ID指定的div的内容？为了确定将来是否会添加更多具有不同内容的div？如果您要有多个div，我建议对它们都使用相同的
类。然后，上述代码将适用于所有这些代码，而无需进行任何更改。我再次更新了答案，向您展示了如何处理多个实例有趣的项目！是的，现在我正在使用带有歌词的remarkjs，通过chromecast与投影仪共享。但定制备注和降价很复杂。我从头开始构建，但更简单。多亏了Rory，和弦解析现在已经解决了，下一步是在幻灯片之间进行一些简单的跳跃。这是带有注释的第一个版本：这意味着，它可以在没有jquery的情况下工作？请告诉这个脚本用指定的css类修改对象好吗。D@rrob我刚刚完成了替换文本的工作。@rrob以及通过使用
.append
jQuery
附加到任何html标记的工作function@rrob抱歉，我对codepen不太熟悉，但这在chrome中对我有用。我在代码的末尾添加了两行，这将完成替换html文本的工作。