Усечение <style>данных тега из строки - PullRequest
Новая
       66

Усечение <style>данных тега из строки

1 голос
/ 28 января 2020

У меня есть строка, скажем, headData , которая является комбинацией тегов <script> и <style>. Для Ex (с фиктивными данными) - 

let headData = '<style>
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 300;
            src: local('Roboto Light'), local('Roboto-Light'), url(path-to.woff) format('woff');
        }</style>
    <script>var isPresent = false;</script>
    <script>var isContent = true;</script>
    <style>@font-face {
            font-family: 'Courgette';
            font-style: normal;
            font-weight: 400;
            src: local('Courgette Regular'), local('Courgette-Regular'), url(path-to.woff2) format('woff2');}</style>'

Я вставляю всю headData в тег, как показано ниже. 

<script dangerouslySetInnerHTML={{__html: headData}} />

Я не хочу вставлять <style> данные, связанные с тегом, и требуется только ввод всех данных, связанных с тегом <script>.

То, что я, наконец, хочу ввести, похоже на - 

let headData = '<script>var isPresent = false;</script>
        <script>var isContent = true;</script>'

Как правильно достичь этого в Javascript?

Ответы [ 2 ]

2 голосов
/ 28 января 2020

Я бы использовал DOMParser, чтобы превратить его в документ, удалить все, что является <style>, а затем взять внутреннее HTML: 

const headData = `<style>
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 300;
            src: local('Roboto Light'), local('Roboto-Light'), url(path-to.woff) format('woff');
        }</style>
    <script>var isPresent = false;<\/script>
    <script>var isContent = true;<\/script>
    <style>@font-face {
            font-family: 'Courgette';
            font-style: normal;
            font-weight: 400;
            src: local('Courgette Regular'), local('Courgette-Regular'), url(path-to.woff2) format('woff2');}</style>`;
const doc = new DOMParser().parseFromString(headData, 'text/html');
for (const style of doc.querySelectorAll('style')) {
  style.remove();
}
const trimmedText = doc.head.innerHTML;
console.log(trimmedText);
1 голос
/ 28 января 2020

Вы можете использовать RegEx с Группами захвата , чтобы заменить тег style и его содержимое для всех вхождений: 

/(<style>)[^<>]*(<\/style>)/g

Где:

(<style>) - 1-я группа захвата

<style> соответствует символам <style> буквально (с учетом регистра)

[^<>]* соответствует один символ, отсутствующий в следующих

  1. * Квантификатор соответствует нулю и неограниченному числу раз, сколько возможно раз

  2. <> соответствует одному символу в списке <>

(<\/style>) - 2-я группа захвата

g глобальный модификатор. Соответствует всем (не возвращается после первого матча)

Демо: 

let headData = `<style>
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 300;
            src: local('Roboto Light'), local('Roboto-Light'), url(path-to.woff) format('woff');
        }</style>
    <script>var isPresent = false;<\/script>
    <script>var isContent = true;<\/script>
    <style>@font-face {
            font-family: 'Courgette';
            font-style: normal;
            font-weight: 400;
            src: local('Courgette Regular'), local('Courgette-Regular'), url(path-to.woff2) format('woff2');}</style>`;
            
 var re = /(<style>)[^<>]*(<\/style>)/g;
 headData = headData.replace(re,'').trim();
 console.log(headData);
...