Код работает довольно хорошо, но имеет некоторые недостатки. Что касается документации, я сам добавляю исходный ответ и добавляю свои наблюдения.
Оригинальный ответ
Есть способ достичь вашей цели, но поиск по всему тексту известных акронимов может быть дорого (с точки зрения производительности), если их большое количество, собранные из разных доменов (с низкой вероятностью для каждого из них в вашем тексте).
Однако вы можете рассмотреть следующий подход:
- имеет ваши известные аббревиатуры и их определения внутри объекта (например,
{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>
Выше будет работать довольно быстро, если список акронимов достаточно большой.
Если ваш список слишком велик текст, который нужно изменить, намного меньше, поэтому может иметь смысл пойти по другому пути: l oop просмотреть массив сокращений и выполнить поиск-замену в целевом тексте:
$(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; т.е. если у меня есть ссылка со значением data-target #collapseCMS, тег <abbr> будет применен и к этой строке с нежелательным побочным эффектом уничтожения ссылки.
Нет. 2
Даже если я убедился, что ни одна строка в теге не нацелена, код каким-то образом «уничтожает» эффект свертывания, который я встроил с помощью Bootstrap 4.
$('#team .collapse').on('show.bs.collapse', function() {
$('.collapse.show').each(function() {
$(this).collapse('hide');
})
})
С помощью этого кода я хочу убедиться, что открытый раздел будет закрыт при открытии другого раздела. Если я применяю код для аббревиатур, все разделы могут быть открыты независимо.
Нет. 3
Если вы используете поппер. js для стилизации всплывающих подсказок, обязательно инициализируйте его после вышеприведенного кода. В противном случае стиль не будет применен, и вы получите «подсказки classi c».