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

Question

问题

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

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

想法

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

解决方法？

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

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

旁注

我发现一个古老的 Whosebug post 建议在服务器端解决此类问题。虽然我也认为这不是最糟糕的想法，但我想强调的是我也需要一个适用于静态页面的解决方案。所以，如果您能避免就什么更好这个问题争论不休，我将不胜感激：服务器端还是客户端？

干杯

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 标签之类的标签；即，如果我有一个 link 的数据目标值为 #collapseCMS，<abbr> 标签也将应用于此字符串，但会产生破坏 link 的不良副作用.

没有。 2

即使我确保标签中没有字符串是目标，代码也会以某种方式 "destroys" 我通过使用 Bootstrap 4.

内置的折叠效果

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

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

没有。 3

如果您使用 popper.js 设置工具提示的样式，请确保在上述代码之后对其进行初始化。否则，将不会应用该样式，您会得到 "classic tooltips".

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

jQuery: Automatically add abbr tags to defined acronyms

javascript

jquery

html

json

usability

原回复

我的观察