提交时将texarea中的[X]替换为[Y]

Replace [X] with [Y] in texarea on submit

本文关键字：替换 texarea 中的 提交      更新时间：2023-09-26

我有一个表单，用户可以在文本区域内插入音乐和弦[Am]， [D]等。用括号括起来的和弦字母。

我想防止用户输入北欧的[H]变体，并在表单提交时将它们替换为英语[B]。

我如何设置一个替换函数，这样做:

[H] -> [B]
[Hm] -> [Bm]
[Hm7] -> [Bm7]
[h] -> [H]
[h7] -> [H7]

我应该足以将括号内的H/H全局替换为同一括号内的大写B。

您是否推荐智能替换功能?

您可以使用以下replace()调用:

.replace(/'[H(.*?)']/gi, '[B$1]')

片段:

document.forms[0].onsubmit = function() {
    var txt = document.querySelector('textarea');
    txt.textContent = txt.textContent.replace(/'[H(.*?)']/gi, '[B$1]');
}
<form action="#">
  <textarea>test [H] and [H7m], but also [h] and [h7].</textarea>
  <input type="submit" value="Submit">
</form>

您正在寻找的称为Regex—正则表达式的缩写。它允许您搜索(和替换)模式，而不仅仅是文字字符串。

要匹配H和弦，可以使用/'[[Hh]([^']]*)']/g。这意味着:

  • /:标记正则表达式的开始(如"表示字符串的开始)
  • '[:匹配文字[
    • [Hh]:匹配H或h
  • (...)捕获组:匹配内部的所有内容并存储以供以后使用
    • [^']]:匹配非]
    • *:匹配最后一个字符零次或多次(零次或多次不是]
      • 的字符)
  • ']:匹配文字]
  • /:标记正则表达式的结束(如"关闭字符串)
  • g:全局修饰符。使正则表达式匹配输入中的每个出现项，而不仅仅是第一个。

演示

要使用这个，在输入字符串上使用replace函数:

inputstring.replace(/'[[Hh]([^']]*)']/g, "[B$1]");

替换值中的$1在正则表达式中插入值捕获组

相关文章：