Добавить новый тег в середину элемента
Я пытаюсь окружить определенные слова в textContent тегами HTML, гипотетически это можно сделать, выполнив element.textContent = element.textContent.replaceAll("word", "<h1>word<h1>");, но это не анализируется, и element.innerHTML= element.innerHTML.replaceAll("word", "<h1>word<h1>"); не работает, потому что есть риск, что слово может быть именем тега. Есть ли какое-либо решение, кроме написания пользовательской функции замены, которая определяет наличие тега?
@OctaviaSima На самом деле это не работает, все еще существует риск того, что < или > не используются для обозначения тегов и могут быть удалены из слова, поскольку оно может быть переменной тега.
Вероятно, вы могли бы написать сложное выражение регулярного выражения, но я чувствую, что в этот момент вам лучше написать менее сложную функцию для синтаксического анализа.
@Spectric Выражение браузера, которому потребуется применить CSS и скрипты к определенным словам в существующих текстовых элементах.
Хм, если это так, могли бы привести какой-то пример, который мы можем увидеть и их соответствующие выводы? также, если вы можете включить некоторые крайние случаи, это было бы здорово.
@OctaviaSima Ну, вот один пример: <p class = "questions">What's your favorite class?</p> и это должно стать <p class = "questions">What's your favorite <custom-tag>class</custom-tag>?</p> Но станет <p <custom-tag>class</custom-tag> = "questions">What's your favorite <custom-tag>class</custom-tag>?</p> Что нарушит рендеринг HTML
Для этого конкретного примера ответ, который я разместил ниже, должен работать, попробуйте, работает ли он на других образцах, о которых вы можете подумать. Если он нуждается в некоторой настройке, не стесняйтесь комментировать случаи, когда он терпит неудачу, чтобы я мог исправить регулярное выражение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете убедиться, что слово, которое вы пытаетесь дополнить, не находится внутри тега. Для этого нужно проверить окружающие его символы. Пока они не заключены в < и > с обеих сторон (или убедитесь, что они заключены в <some tag> слева и </?some tag> справа, как я сделал ниже), они должны быть единственными, которые нужно заменить. Попробуйте этот пример регулярного выражения ниже:
function padTags(content, openTag, word, closeTag) {
console.info(content)
const replacement = openTag + word + closeTag;
const regex = `(?<!<[^<>]*)${word}(?![^<>]*>)`;
const pattern = new RegExp(regex, 'g');
return content.replace(pattern, replacement);
}
console.info(padTags(`<p class = "questions">What's your favorite class?</p>`,
'<custom-tag>', 'class', '</custom-tag>'));
console.info(padTags(`<div><p class = "test">class</p></div>`,
'<custom-tag>', 'class', '</custom-tag>'));
console.info(padTags(`<div> class <p data-customvar = "<class>">This is my class </p>class</div>`,
'<custom-tag>', 'class', '</custom-tag>'));Это здорово, спасибо, но вот ошибка, которую я нашел <div><p class = "test">class</p></div>
Кроме того, поскольку он требует, чтобы он был окружен тегами, я думаю, что следует использовать externalHTML вместо innerHTML, поскольку есть вероятность, что он не содержит тегов в innerHTML.
Честно говоря, я думаю, что при подходе с регулярными выражениями всегда будут пограничные случаи из-за нерегулярной природы HTML.
Извините за ошибку @AidanWelch, забыл добавить к нему другой тег, но он должен охватывать и этот случай после изменения регулярного выражения. Также превратил его в формат функции, чтобы вам было проще его повторно использовать и протестировать некоторые случаи, когда вы могли подумать, что это регулярное выражение не удастся.
Хорошо, это почти идеально! И я думал, что это идеально, но я умею ломать вещи и обнаружил еще один пограничный случай: <div> class <p data-customvar = "<class>">This is my class </p>class</div> данные элемента могут вызвать проблемы с последующим сопоставлением слов. Кроме того, я просто использую regex101 для тестирования
Привет, @AidanWelch, создал комнату для нас обоих, чтобы обсудить возможные крайние случаи, не могли бы вы проверить свои уведомления о чатах от меня?
вы можете заранее проверить, окружено ли слово тегами через регулярное выражение. поймать только там, где слово не окружено
<или>