Создание большого глоссария всплывающей подсказки на сайте, используя шорткод для редакторов? jQuery правильное решение?

Question

Работа над небольшим сайтом хобби, построенным на WordPress. У этого хобби есть большие (несколько сотен) терминов, которые могут многократно появляться на странице с определенной информацией, которую пользователь, скорее всего, захочет вызвать, и поэтому у меня реализован плагин tooltipster для отображения всплывающие подсказки при наведении.

Тем не менее, идея состоит в том, чтобы в конечном итоге масштабировать сайт, чтобы другие пользователи, не являющиеся разработчиками, могли добавлять контент; Я хочу, чтобы им было удобно вставлять всплывающую подсказку во время написания.

В данный момент всплывающие подсказки находятся в одном абзаце, например:

<p>This is my paragraph with a certain <span class="tooltip" data-tooltip-content="#Three_Word_Term">Three Word Term</span> in it. When it's hovered the tooltip displays. </p>

В идеале Я бы использовал какой-нибудь простой шорткод, чтобы они могли написать предложение с {! Three Word Term}. И это все, что им нужно было бы сделать с их стороны.

Так что я пытаюсь придумать способ, который в основном захватил бы {! Text String} и заменил бы его на span и информацию о классе, плюс Идентификатор, который соответствует текстовой строке, которую он берет ID = "Text_String". В частности, я стараюсь избегать определения каждого термина и того, на что он будет заменен, но пусть он автоматически захватывает термин между {! *} (Или чем-то в этом роде) и повторно использует его в бите замены.

Я думаю это что-то, что можно сделать с помощью jQuery? Я знаю, что могу найти и заменить, я просто не знаю, смогу ли я «найти» текст между определенными маркерами, а затем повторно использовать его в замене.

Также не знаю, является ли jQuery лучшее / самое чистое решение для этого? Я абсолютно новичок и просто учу себя, как я go, так что ценим владение рукой и вклад.

Answer 1

Если я понимаю, что вы спрашиваете ... вы хотите, чтобы пользователи вводили текст, например:

<p id="myP">This is my paragraph with a certain {!Three Word Term} in it. When it's hovered the tooltip displays.</p>

, а затем при сохранении замените текст на

<p id="myP">This is my paragraph with a certain <span class="tooltip" data-tooltip-content="#Three_Word_Term">Three Word Term</span> in it. When it's hovered the tooltip displays. </p>

Я добавил идентификатор с предположением, что у вас есть какой-то способ получить этот указанный элемент параграфа c (я просто буду использовать идентификатор). Вы можете получить введенный текст абзаца в jQuery с помощью var enteredText = $("#myP").html();

. Если вы пытаетесь сопоставить введенные шаблоны и заменить их, вы можете немного узнать о JavaScript «регулярных выражениях». Они сложны (особенно с кем-то новым для JavaScript), но очень полезны для таких вещей, как это. Вот регулярное выражение, которое вы можете использовать, чтобы найти все термины в данном тексте, которые имеют заглавные буквы, строчные буквы или пробелы, окруженные {! и}

var myRegex = /\{!([A-Z\s]+)\}/gi;

Да, это грязно, но выяснение этого регулярного выражения, вероятно, самая сложная часть. Теперь вы можете использовать .match, чтобы просто увидеть, существует ли что-то в этом шаблоне во введенном тексте:

var foundText = "";

if( enteredText.match( myRegex ) != null)
  foundText = enteredText.match( myRegex )[0];

Если шаблон был подобран выше, теперь вы можете использовать некоторые строковые методы для работы с найденным термином .

var textToReplaceEnteredText = "";

// ... do some stuff with the foundText and enteredText strings above
// ... use those to build the textToReplaceEnteredText string
// ... I'll let you work this out. You may want to use the .replace method of strings

// Finally, use jQuery's .html method again, to replace the paragraph's HTML text
$("#myP").html( textToReplaceEnteredText );