jQuery：自动将缩写标签添加到定义的首字母缩写词

Question

问题

我想通过为选定的首字母缩略词添加缩写标签来提高网站的可用性，这样人们即使不知道其他人在日常使用的所有酷术语和定义也能够遵循给定的文本他们域的业务。

过去我是手动添加这些标签的，所以CMS变成了<abbr title="Content Management System">CMS</abbr>等等。老实说：这种方法很糟糕，很难坚持。

想法

使用 jQuery（或 JavaScript）——可能与 JSON 结合使用——将<main> 标签之间的任何文本与首字母缩略词列表进行匹配，每当找到一个元素时，它就会自动用abbr 标签包装。

解决方案？

到目前为止，我只有一个概念，因为我发现的所有相关方法似乎都针对给定的字符串或标签 (example with acronym)。那么你会推荐什么来解决这个问题呢？简而言之：

1. 获取<main>标签之间的内容
2. 将内容与首字母缩略词列表进行匹配
3. 用<abbr>标签包裹首字母缩略词以提供相应的信息

附注

我发现一个古老的 stackoverflow 帖子建议在服务器端解决此类问题。虽然我也认为这不是最糟糕的想法，但我想强调我也需要一个适用于静态页面的解决方案。因此，如果您能避免争论哪个更好：服务器端与客户端？ ????

干杯

Answer 1

代码运行良好，但有一些缺点。对于文档问题，我自己添加了原始答案并添加了我的观察结果。

原始回复

有一种方法可以实现您的目标，但是如果从不同的域收集大量的已知首字母缩略词（从性能的角度来看）搜索整个文本可能会很昂贵（在其中找到每个首字母缩略词的概率很低）你的文字）。

但是，您可以考虑以下方法：

• 在对象中包含您知道的首字母缩写词及其定义（例如{acronym: 'CMS', meaning: 'Content Management System'}）
• 遍历您的文本内容以查找匹配的首字母缩写词并替换为相应的<abbr> 元素

$(document).ready(() => {

  let abbreviations = [
          {abbreviation: 'CMS', meaning: 'Content Management System'},
          {abbreviation: 'ECM', meaning: 'Enterprise Content Management'},
          {abbreviation: 'WCM', meaning: 'Web Content Management'}
        ],
        mainHtml = $('main').html()
  
  mainHtml = mainHtml.replace(
    new RegExp(abbreviations.map(({abbreviation}) => abbreviation).join('|'), 'g'),
    m => {
      const matchingAbbreviation = abbreviations.find(({abbreviation}) => abbreviation == m),
            {abbreviation:content, meaning:title} = matchingAbbreviation
      return `<abbr title="${title}">${content}</abbr>`
    }
  )
  
  $('main').html(mainHtml)
})

abbr { /* For demo purpose */
  color: #ffffff;
  background-color: #284b63;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>CMS is a software application that can be used to manage the creation and modification of digital content. CMSs are typically used for ECM and WCM. ECM typically supports multiple users in a collaborative environment by integrating document management, digital asset management and record retention. Alternatively, WCM is the collaborative authoring for websites and may include text and embed graphics, photos, video, audio, maps and program code that display content and interact with the user. ECM typically includes a WCM function</main>

当首字母缩略词列表比较大时，上述方法的运行速度会非常快。

如果您的列表恰好太大而要修改的文本要小得多，那么反过来可能会有意义：遍历缩写数组并在目标文本中进行查找替换：

$(document).ready(() => {

  let abbreviations = [{
        abbreviation: 'CMS',
        meaning: 'Content Management System'
      },
      {
        abbreviation: 'ECM',
        meaning: 'Enterprise Content Management'
      },
      {
        abbreviation: 'WCM',
        meaning: 'Web Content Management'
      }
    ],
    mainHtml = $('main').html()

  abbreviations.forEach(({
    abbreviation: content,
    meaning: title
  }) => {
    mainHtml = mainHtml.replace(new RegExp(content, 'g'), `<abbr title="${title}">${content}</abbr>`)
  })

  $('main').html(mainHtml)
})

abbr {
  /* For demo purpose */
  color: #ffffff;
  background-color: #284b63;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>CMS is a software application that can be used to manage the creation and modification of digital content. CMSs are typically used for ECM and WCM. ECM typically supports multiple users in a collaborative environment by integrating document management,
  digital asset management and record retention. Alternatively, WCM is the collaborative authoring for websites and may include text and embed graphics, photos, video, audio, maps and program code that display content and interact with the user. ECM typically
  includes a WCM function</main>

我的观察

没有。 1

代码在两个方向上都运行良好。唯一的缺点是它不仅针对文本本身，还针对诸如 achor 标签之类的标签；即，如果我有一个数据目标值为#collapseCMS 的链接，<abbr> 标记也将应用于此字符串，并带来破坏链接的不良副作用。

没有。 2

即使我确保标签中没有字符串是目标，代码也会以某种方式“破坏”我使用 Bootstrap 4 构建的折叠效果。

$('#team .collapse').on('show.bs.collapse', function() {
  $('.collapse.show').each(function() {
    $(this).collapse('hide');
  })
})

使用此代码，我想确保在打开另一个部分时关闭一个打开的部分。如果我应用首字母缩略词的代码，所有部分都可以独立打开。

没有。 3

如果您使用 popper.js 为您的工具提示设置样式，请确保在上述代码之后对其进行初始化。否则，样式将不会被应用，您将获得“经典工具提示”。