Строка с HTML-тегом в качестве селектора

Question

Я работаю над сайтом, который использует I18N.

У меня есть команда переводчиков, которые проверяют переводы на сайте.

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

Мне нужно обнаружить все строки в моем PO-файле, которые используются на текущей странице, и добавить класс в качестве прямого родителя строки, чтобы я мог добавить текстовый ввод для отправки нового перевода.

Итак, я создал функцию, которая сохраняет каждый перевод, использованный на текущей странице (как базовую строку в PO-файле, так и окончательный перевод с данными, введенными PHP), и передает их как объект JSON в JavaScript.

Теперь я должен найти все эти переводы на странице.

Моя проблема состоит в том, чтобы сопоставить их, когда они содержат HTML-тег.

В моем PO-файле:

msgid "Bonjour <strong>%s</strong>"
msgstr "Hi <strong>%s</strong>"

Источник моей страницы:

<div>Hi <strong>Tristan</strong></div>

Здесь мне нужно

1. , чтобы соответствовать Hi <strong>Tristan</strong>
2. добавить класс для прямого родителя (здесь это узел "div")
3. Тогда я смогу прикрепить свой текст для ввода нового перевода

Как я могу соответствовать этому? Я думаю, что мне нужно использовать переведенную строку в качестве селектора.

Я бы хотел избежать обтекания строк i18n во время обработки PHP элементом (потому что это каким-то образом изменит DOM и, следовательно, повлияет на дизайн веб-сайта), но, с другой стороны, анализирует страницу с помощью строки из PO-файла также выглядят довольно тяжелыми на стороне браузера.

Есть намеки?

Answer 1

после @ lonesomeday я бы тоже использовал span. вот для чего они. это где промежуток должен быть:

msgid "Bonjour <strong>%s</strong>" msgstr "Hi <strong>%s</strong>" становится:

• <span class='I18N'>Bonjour <strong>Tristan</strong></span>
• <span class='I18N'>Hi <strong>Tristan</strong></span>

тогда javascript становится:

$(document).ready(function(){
  $('.I18N').closest('*').addClass('inputI18N');
});