регулярное выражение заменить HTML-тег со всеми атрибутами внутри специального символа

1

Мои навыки регулярного выражения не так высоки, поэтому я заранее извиняюсь, если мой вопрос кого-то беспокоит.

Я пытаюсь преобразовать строку двумя способами

  1. Из специального символа => html-тег с атрибутами
  2. Форма html-тега с атрибутами => специальный символ

первый способ работает отлично и выглядит следующим образом:

var string = "User template user info: {{userFirstname}} - {{userLastname}}";
var text = string
            .replace(/\{{/g, "<span class='label label-danger' contenteditable='false' style='padding: 6px; color: #FFFFFF; font-size: 16px;'>")
            .replace(/\}}/g, "<span contenteditable='false' class='remove-tag fa fa-times'></span></span>&nbsp;");

второй способ не работает, и я не могу понять причину:

var text = 'User template user info: <span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">userFirstname<span contenteditable="false" class="remove-tag fa fa-times"></span></span>&nbsp; - <span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">userLastname<span contenteditable="false" class="remove-tag fa fa-times"></span></span>&nbsp;
var string = text
            .replace(/<span class='label label-danger' contenteditable='false' style='padding: 6px; color: #FFFFFF; font-size: 16px;'>/g, "{{")
            .replace(/<span contenteditable='false' class='remove-tag fa fa-times'><\/span><\/span>&nbsp;/g, "}}")

Я ценю, если кто-нибудь скажет мне, что мне не хватает. заранее спасибо

  • 0
    Значение замены имеет значения атрибута, заключенные в одинарные кавычки contenteditable='false' , а значение свойства text имеет значения атрибута, заключенные в двойные кавычки contenteditable="false" . Это приводит к тому, что замена не находит указанную строку из-за несоответствия кавычек.
Теги:

3 ответа

1
Лучший ответ

В то время как простая замена, основанная на заполнитель, часто работает, замена сложных HTML-элементов легко сбой с регулярным выражением.

Я бы рекомендовал здесь другой подход!

Верхний подход дает вам контроль над тем, какие элементы вы хотите устранить и которые необходимо сохранить. Нижний подход разделяет весь HTML и предполагает, что вы знаете содержание span.

var text = 'User template user info: <span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">userFirstname<span contenteditable="false" class="remove-tag fa fa-times"></span></span>&nbsp; - <span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">userLastname<span contenteditable="false" class="remove-tag fa fa-times"></span></span>&nbsp;'

function replaceSpan(text)
{
  //convert text into virtual DOM object
  var div = document.createElement("div");
  div.insertAdjacentHTML("afterbegin", text);
  //loop over children and replace
  Array.prototype.forEach.call(div.querySelectorAll("span"), function(element){
  
    if (element.contentEditable == "false" && element.classList.contains("label") && element.classList.contains("label-danger") )
    {
      elementContent = element.textContent;
      element.parentNode.replaceChild(document.createTextNode("{{"+elementContent+"}}"), element);
      
    }
  });
  console.log(div.textContent);
  return div.textContent
}

replaceSpan(text);

Также это может быть упрощено:

var text = 'User template user info: <span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">userFirstname<span contenteditable="false" class="remove-tag fa fa-times"></span></span>&nbsp; - <span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">userLastname<span contenteditable="false" class="remove-tag fa fa-times"></span></span>&nbsp;'

var string = document.createElement("div");
string.innerHTML = text;
// use textContent of div element to return text without HTML
string =  string.textContent.replace("userFirstname", "{{userFirstname}}")
          .replace("userLastname", "{{userLastname}}");
          
console.log(string);
Поделиться
  • 1
    Определенно лучший ответ, я не могу использовать второй способ, потому что часть контента динамична, но первый способ абсолютно потрясающий! Спасибо за ваш ответ!
0

Значение replace имеет свои значения атрибутов, заключенные в одинарные кавычки contenteditable='false', в то время как значение свойства text имеет свои значения атрибутов, заключенные в двойные кавычки contenteditable="false". Это заставляет замену не находить указанную строку из-за несоответствия котировок.

В text переменной также отсутствует закрывающая '

// replace now searching with " instead of '
var text = 'User template user info: <span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">userFirstname<span contenteditable="false" class="remove-tag fa fa-times"></span></span>&nbsp; - <span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">userLastname<span contenteditable="false" class="remove-tag fa fa-times"></span></span>&nbsp;'
var string = text
        .replace(/<span class="label label-danger" contenteditable="false" style="padding: 6px; color: #FFFFFF; font-size: 16px;">/g, "{{")
        .replace(/<span contenteditable="false" class="remove-tag fa fa-times"><\/span><\/span>&nbsp;/g, "}}")
Поделиться
0

Я считаю, что это своего рода обходной путь, но он работает для меня

 var string = text
            .replace(/<span[^>]*>/g, "{{")
            .replace(/<\/span[^>]*>/g, "")
            .replace(/{{&nbsp;/g, "}}");
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню