Выбор HTML-тегов с помощью Regex - PullRequest
Новая
       16

Выбор HTML-тегов с помощью Regex

0 голосов
/ 18 декабря 2018

У меня есть руководство по веб-компонентам, в котором есть список веб-компонентов, созданный по шаблону следующего имени:

  • mkk-textfield
  • mkk-textarea
  • mkk-counter
  • mkk-checkbox
  • ...

Все они, как вы видите, начинаются с mkk- префикс и все они имеют тег input внутри.

Я должен проверить некоторые вещи с помощью Ajax и jQuery и добавить некоторые атрибуты и классы вmkk-whatever компонент (не на вложенном входе) в зависимости от этой проверки.

Пример:

(до проверки) 

<mkk-textfield label="Text">
    <input type="text" value="" placeholder="Text" />
</mkk-textfield>

(после проверки) 

<mkk-textfield label="Text" class="someClass error" error-message="My custom error message">
    <input type="text" value="" placeholder="Text" />
</mkk-textfield>

Есть ли способ выбрать тег с jQuery , соответствующий шаблону как регулярное выражение?Что-то вроде jQuery селекторов, но для тега:

Следующий пример - для выбора всех дивов, его атрибут name начинается с слова value : div[name|=”value”] илиdiv[name~=”value”]

Но в моем случае я хотел бы сделать что-то вроде mkk.*, чтобы выбрать все теги, соответствующие регулярному выражению.

Дело в том, что все они не могут иметь идентификатор,Итак, мне нужно сделать это для того, чтобы использовать что-то вроде closest функции и на этом этапе выбрать ту, которая с mkk-, которая может быть текстовым полем, счетчиком или чем-то еще.

Заранее спасибо.

ОБНОВЛЕНИЕ для полного примера.У меня есть форма с тремя веб-компонентами: 

<mkk-textfield label="Text">
    <input type="text" value="" placeholder="Text" />
</mkk-textfield>

<mkk-datepicker label="MyDate">
    <input type="date" value="" placeholder="Text" />
</mkk-textfield>

<mkk-radio label="MyRadio">
    <input type="radio" value="" />
</mkk-textfield>

Все эти веб-компоненты "взрываются" в DOM с элементами div и метками внутри, например, текстовое поле: 

<mm-textfield label="Name" class="hydrated">
    <label>Name</label>
    <div class="input-content">
        <input id="name" type="text" value="" placeholder="Enter your name" name="name">    
   </div><
/mm-textfield>

Когда завершение (проверка вызова ajax) завершено, я получаю в своей функции jQuery все поля формы и сообщение, поэтому функция addError выполняется один раз для каждого поля формы: 

function addError(field, message){
    // Do the magic to figure out which mkk web component is the closest one
    $(/*PUT HERE THIS STACKOVERFLOW SOLUTION*/).attr("error-message", message).addClass("error");
}

Я могу разрешить ее с помощьюifs и parent (). parent () зависят от mkk-компонента, поскольку каждый из них имеет разные html-вложенные теги, но я написал этот вопрос, чтобы сделать это более элегантным способом.

Надеюсь, это поможетлучше понять проблему.

1 Ответ

0 голосов
/ 18 декабря 2018

Вы никогда не должны использовать Regex для разбора HTML.Если вы уже используете jQuery, вы можете использовать его для анализа строки HTML и внесения в нее необходимых изменений, используя доступные методы;attr() и addClass() в данном случае: 

var $tags = $('<mkk-textfield label="Text" class="someClass error" error-message="My custom error message"><input type="text" value="" placeholder="Text" /></mkk-textfield>');
$tags.filter('mkk-textfield').attr('error-message', 'My custom error message').addClass('someClass error');

// testing
console.log($tags.get(0).outerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...