Блог

Главная - Вопросы по программированию - Как получить подстроку семейства шрифтов с помощью регулярного выражения в JS

Как получить подстроку семейства шрифтов с помощью регулярного выражения в JS

#javascript #regex #string #substring #font-family

#javascript #регулярное выражение #строка #подстрока #семейство шрифтов

Вопрос:

Я пытаюсь получить семейство шрифтов из строки, представляющей части html. Семейством шрифтов может быть любой шрифт, поэтому я думал об использовании регулярного выражения. Строка также может содержать x символов. Примером ввода может быть:

 '<body id="foo" class="bar"><span style="color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas">Example Text</span></body>'

Идеальным результатом будет «Consolas». Однако я не очень хорошо разбираюсь в регулярных выражениях и не могу придумать подходящее регулярное выражение.

Данные поступают в виде строкового представления элемента

РЕШЕНИЕ: Спасибо terrymorse (комментарии) и Gerardo Cabrera (принятый ответ)! Я не знал, как преобразовать html-строку в элемент. Удалось извлечь семейство шрифтов на основе их отзывов

Комментарии:

1. Не за горами куча отрицательных голосов. Прежде чем они появятся, вы можете добавить свою собственную попытку.

2. Рассматривали ли вы возможность использования DOM вместо синтаксического анализа html-строк? например element.style

3. @Evert К сожалению, данные поступают в виде строкового представления элемента

4. @evgengorbunkov для чего нужны отрицательные голоса?

5. @terrymorse Спасибо, вы правы! Я не знаю, как пометить комментарий в качестве ответа, поэтому я задал вам вопрос в своем вопросе, лол

Ответ №1:

Как все говорят, не стоит использовать регулярное выражение для попытки анализа HTML. Просто используйте DOM следующим образом:

 // Like the user   terrymorse   did
let div = document.createElement('div'); 
div.innerHTML = '<body id="foo" class="bar"><span style="color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas">Example Text</span></body>';

let children = div.children;

console.log(children[0].style.fontFamily);

Вы также можете использовать функции разделения и массива, чтобы найти подобное свойство, но опция DOM намного лучше.

 var s = '<body id="foo" class="bar"><span style="color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas">Example Text</span></body>';

var x = s.split(";");
var y = x.filter(e => e.includes("font-family"))[0].split('"')[0];
 
var result = y.replace("font-family: ", "");

console.log(result)
Метки: